/*
Theme Name: Prime Exhibits
Theme URI: https://prime-exhibits.com/
Author: Prime Exhibits
Description: Custom, version-controlled presentation theme for Prime Exhibits.
Version: 0.9.19
Requires at least: 6.8
Requires PHP: 8.2
Text Domain: prime-exhibits
*/

/**
 * One stylesheet, one cascade. Sections run base → layout → components → page types.
 * Every value comes from assets/tokens.css, and each component owns its own responsive
 * and reduced-motion rules so the file can grow to the rest of the site without a
 * second override layer accumulating on top.
 */

/* =============================================================== Base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--pe-surface);
  color: var(--pe-ink);
  font-family: var(--pe-font-body);
  font-size: var(--pe-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--pe-mint-deep);
  outline-offset: 4px;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: fixed;
  z-index: 100000;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 12px 16px;
  clip: auto;
  background: var(--pe-surface);
}

/* =============================================================== Layout */

.pe-container {
  width: min(var(--pe-content), calc(100% - 40px));
  margin-inline: auto;
}

.pe-container--wide { width: min(var(--pe-content-wide), calc(100% - 56px)); }

.site-main { min-height: 60vh; }

.pe-section { padding: var(--pe-space-8) 0; }

.pe-section--alt { background: var(--pe-wash); }

/* A section visitors should be able to scroll past quickly: same type, less air. */
.pe-section--compact { padding: var(--pe-space-6) 0; }
.pe-section--compact h2 { margin-bottom: 22px; }

.pe-center { text-align: center; }

@media (max-width: 820px) {
  .pe-section { padding: var(--pe-space-7) 0; }
}

@media (max-width: 520px) {
  .pe-container,
  .pe-container--wide { width: calc(100% - 36px); }
}

/* =============================================================== Typography */

.pe-display-1,
.pe-display-2,
.pe-display-3,
.pe-home h1,
.pe-home h2,
.pe-home h3,
.entry__title,
.pe-archive__header h1 {
  font-family: var(--pe-font-display);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0;
}

.pe-home h1 { font-size: var(--pe-display-1); }
.pe-home h2 { font-size: var(--pe-display-2); margin-bottom: var(--pe-space-5); }
.pe-home h3 { font-size: 1.6rem; }
.pe-home p:not(.pe-eyebrow) { color: var(--pe-muted); }

.pe-eyebrow {
  margin: 0 0 18px;
  color: var(--pe-mint-deep);
  font-size: var(--pe-text-eyebrow);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pe-lead {
  margin: var(--pe-space-3) 0 28px;
  font-size: 1.04rem;
  line-height: 1.58;
}

.pe-intro {
  max-width: 700px;
  margin: -28px 0 var(--pe-space-5);
}

@media (max-width: 520px) {
  .pe-home h2 { margin-bottom: 36px; }
  .pe-intro { margin-top: -20px; }
}

/* =============================================================== Buttons and links */

.pe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pe-pill-pad);
  border-radius: var(--pe-radius-pill);
  font-weight: 750;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--pe-hover), color var(--pe-hover);
}

.pe-button--dark {
  background: var(--pe-ink);
  color: var(--pe-surface);
}

/* Interaction changes the fill to brand green and leaves the label white. */
.pe-button--dark:hover,
.pe-button--dark:focus-visible {
  background: var(--pe-mint);
  color: var(--pe-surface);
}

.pe-arrow {
  font-weight: 750;
  text-decoration: none;
}

.pe-hero .pe-arrow {
  color: var(--pe-mint-deep);
  transition: color var(--pe-hover);
}

.pe-hero .pe-arrow:hover,
.pe-hero .pe-arrow:focus-visible { color: var(--pe-ink); }

.pe-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

/* =============================================================== Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--pe-line);
  background: transparent;
}

/* The glass is painted on its own layer rather than on .site-header itself. An element
   carrying backdrop-filter becomes a backdrop root, and its descendants can only sample
   what that root painted — so a filter here would leave the dropdown panels hanging below
   the header with nothing to blur, and they would read as plain translucent boxes. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pe-glass);
  -webkit-backdrop-filter: var(--pe-glass-filter);
  backdrop-filter: var(--pe-glass-filter);
}

.site-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  min-height: var(--pe-header-height);
}

.site-branding {
  flex: 0 0 auto;
  display: block;
  text-decoration: none;
}

.site-logo {
  width: auto;
  max-width: clamp(168px, 14vw, 226px);
  max-height: 30px;
  object-fit: contain;
}

/* Full-height so a panel positioned at the item's bottom edge lands under the header. */
.site-navigation--desktop {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
}

/* Scoped to the top level: the dropdown panels below set their own column layout. */
.site-navigation > ul {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2vw, 34px);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-navigation > ul > li {
  display: flex;
  align-items: center;
}

.site-navigation li { position: relative; }

.site-navigation a {
  display: inline-flex;
  align-items: center;
  color: var(--pe-muted);
  font-size: .94rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.site-navigation a:hover,
.site-navigation a:focus-visible { color: var(--pe-ink); }

.site-navigation .menu-item-has-children > a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .65;
}

/* First level drops from the header's bottom edge, clearing its 1px border. */
/* Panels stay in the tree and hide with visibility rather than display, so closing can be
   delayed: a panel lingers briefly after the pointer leaves, which survives a diagonal path
   from a row to the flyout it opened, and hovering a sibling row on the way no longer snaps
   the flyout shut. Hidden panels take no pointer events and cannot be tabbed into. */
.site-navigation .sub-menu {
  position: absolute;
  top: calc(100% + 1px);
  left: -14px;
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease, visibility 0s linear .22s;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  /* Sized to its longest label so items stay on one line, capped so a long label cannot
     push the panel past the viewport. */
  width: max-content;
  min-width: 262px;
  max-width: min(460px, calc(100vw - 32px));
  margin: 0;
  padding: 8px;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius-sm);
  background: transparent;
  box-shadow: var(--pe-shadow-float);
  list-style: none;
}

/* Same reason as the header: keeping the filter off the panel itself lets the flyout
   nested inside it blur the page rather than an empty backdrop root. */
.site-navigation .sub-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--pe-glass);
  -webkit-backdrop-filter: var(--pe-glass-filter);
  backdrop-filter: var(--pe-glass-filter);
}

/* Deeper levels fly out to the side rather than covering the item they came from. */
/* The item stops one panel padding + border (9px) short of the panel edge, so clearing
   exactly that puts the flyout's edge flush against the parent's — touching, no overlap,
   and no gap for the pointer to fall through. */
.site-navigation .sub-menu .sub-menu {
  top: -9px;
  left: calc(100% + 9px);
}

.site-navigation .sub-menu .sub-menu.is-flipped {
  left: auto;
  right: calc(100% + 9px);
}

.site-navigation li:hover > .sub-menu,
.site-navigation li:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

/* Flyouts get a longer grace than the top row: the pointer travels further to reach them. */
.site-navigation .sub-menu .sub-menu { transition: opacity .12s ease, visibility 0s linear .35s; }
.site-navigation .sub-menu li:hover > .sub-menu,
.site-navigation .sub-menu li:focus-within > .sub-menu { transition-delay: 0s; }

/* The row stops 9px short of the panel edge (padding + border), and the flyout starts at
   that edge. Invisible bridges on both sides of the row keep it hovered across the strip,
   whichever way the flyout opens. They sit beside the row, never over its link. */
.site-navigation .sub-menu .menu-item-has-children::before,
.site-navigation .sub-menu .menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9px;
}
.site-navigation .sub-menu .menu-item-has-children::before { right: 100%; }
.site-navigation .sub-menu .menu-item-has-children::after { left: 100%; }

.site-navigation .sub-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 2px;
  white-space: normal;
}

.site-navigation .sub-menu .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Points along the direction the flyout opens. */
.site-navigation .sub-menu .menu-item-has-children > a::after {
  margin-left: 0;
  transform: translateY(0) rotate(-45deg);
}

.site-navigation .sub-menu .menu-item-has-children > a[data-flipped]::after {
  transform: translateY(0) rotate(135deg);
}

.site-navigation .sub-menu a:hover,
.site-navigation .sub-menu a:focus-visible { background: rgba(14, 20, 17, .05); }

.site-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin-left: auto;
}

.site-header__phone,
.site-header__email {
  font-size: .98rem;
  font-weight: 750;
  white-space: nowrap;
  text-decoration: none;
}

.site-header__email { font-weight: 650; }

.menu-toggle {
  display: none;
  border: 0;
  background: none;
  color: var(--pe-ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1180px) {
  .site-header__inner { gap: 22px; }
  .site-navigation a { font-size: .9rem; }
}

@media (max-width: 1320px) {
  .site-header__email { display: none; }
}

@media (max-width: 1060px) {
  .site-navigation--desktop,
  .site-header__phone,
  .site-header__email,
  .site-header__actions > .pe-button { display: none; }
  .menu-toggle { display: block; }
}

@media (max-width: 800px) {
  .site-header__inner { min-height: 68px; }
  :root { --pe-header-total: 68px; }
}

/* =============================================================== Mobile drawer */

.mobile-navigation {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(90vw, 380px);
  height: 100vh;
  padding: 0 24px 32px;
  overflow: auto;
  border-left: 1px solid var(--pe-line);
  background: var(--pe-veil);
  -webkit-backdrop-filter: var(--pe-blur);
  backdrop-filter: var(--pe-blur);
}

.mobile-navigation__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 68px;
  border-bottom: 1px solid var(--pe-line);
}

.mobile-navigation ul {
  margin: 0;
  padding: 16px 0;
  list-style: none;
}

.mobile-navigation li { border-bottom: 1px solid var(--pe-line); }

.mobile-navigation a {
  display: block;
  padding: 14px 0;
  text-decoration: none;
}

/* Collapsible sections keep the drawer short enough to scan. */
.mobile-navigation .menu-item-has-children > a { padding-right: 52px; }

.mobile-navigation__branch {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pe-muted);
  cursor: pointer;
}

.mobile-navigation .menu-item-has-children { position: relative; }

.mobile-navigation__branch::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--pe-hover);
}

.mobile-navigation__branch[aria-expanded="true"]::before {
  transform: translateY(2px) rotate(225deg);
}

.mobile-navigation .sub-menu {
  padding: 0 0 8px 18px;
  border: 0;
}

.mobile-navigation .sub-menu[hidden] { display: none; }

.mobile-navigation .sub-menu li { border-bottom: 0; }

.mobile-navigation .sub-menu a {
  padding: 10px 0;
  color: var(--pe-muted);
  font-size: .94rem;
}

.mobile-navigation__phone,
.mobile-navigation__email {
  display: block;
  margin-top: 20px;
  font-weight: 750;
}

.mobile-navigation__email {
  margin-top: 10px;
  font-weight: 650;
}

.menu-is-open { overflow: hidden; }

/* =============================================================== Dark header */

/* The header, its dropdowns, and the drawer are ink glass: the same blur as before over a
   dark fill, white type, brand green on interaction. Scoped under .site-header so it
   overrides the light rules above without touching the rest of the page. */
/* No border under the bar. The glass layer covers the padding box only, so even a
   transparent 1px border lets the page show through as a white hairline above the hero. */
.site-header { border-bottom: 0; }
/* The glass reaches 1px past the bar. The bar and the hero are separate composited layers,
   and at some zoom levels they snap a sub-pixel apart, leaving a white hairline of page
   between them; the overlap covers it wherever it lands. */
.site-header::before { bottom: -1px; background: var(--pe-glass-dark); }
/* First level only: without the bar's border there is no 1px to clear. Nested flyouts keep
   their own offset, which puts them level with the item that opened them. */
.site-header .site-navigation > ul > li > .sub-menu { top: 100%; }

.site-header .site-navigation a,
.site-header .site-header__phone,
.site-header .site-header__email,
.site-header .menu-toggle { color: var(--pe-text-on-dark); }

.site-header .site-navigation a:hover,
.site-header .site-navigation a:focus-visible,
.site-header .site-header__phone:hover,
.site-header .site-header__phone:focus-visible,
.site-header .site-header__email:hover,
.site-header .site-header__email:focus-visible { color: var(--pe-mint); }

/* The panels hang over the hero photo while the bar sits over the page, so the bar's own
   72% glass renders much darker on them. They use the bar's composited tone at 90% with the
   same blur instead: near the bar's colour over any backdrop, still glass. (A base colour
   under the glass cannot work: the panel's own background paints above its z-index -1 layer.) */
.site-header .site-navigation .sub-menu {
  border-color: var(--pe-line-dark);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.site-header .site-navigation .sub-menu::before { background: var(--pe-panel-dark); }
.site-header .site-navigation .sub-menu a:hover,
.site-header .site-navigation .sub-menu a:focus-visible { background: rgba(255, 255, 255, .08); }

/* Quote button on the dark bar: brand green with white text, white with ink text on
   interaction. */
.site-header__actions .pe-button--dark {
  background: var(--pe-mint);
  color: var(--pe-text-on-dark);
}
.site-header__actions .pe-button--dark:hover,
.site-header__actions .pe-button--dark:focus-visible {
  background: var(--pe-text-on-dark);
  color: var(--pe-ink);
}

.site-header .mobile-navigation {
  border-left-color: var(--pe-line-dark);
  background: var(--pe-veil-dark);
}
.site-header .mobile-navigation__header,
.site-header .mobile-navigation li { border-bottom-color: var(--pe-line-dark); }
.site-header .mobile-navigation a,
.site-header .mobile-navigation__phone,
.site-header .mobile-navigation__email { color: var(--pe-text-on-dark); }
.site-header .mobile-navigation .sub-menu a,
.site-header .mobile-navigation__branch { color: var(--pe-muted-on-dark); }
.site-header .mobile-navigation a:hover,
.site-header .mobile-navigation a:focus-visible,
.site-header .mobile-navigation__phone:hover,
.site-header .mobile-navigation__email:hover { color: var(--pe-mint); }

/* =============================================================== Hero */

/* Full bleed: the image runs from under the header to the bottom of the window and out to
   the left viewport edge, while the copy stays aligned to the site's content column. */
.pe-hero { padding: 0; }

.pe-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  align-items: stretch;
  min-height: calc(100svh - var(--pe-header-total));
}

.pe-hero__media {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--pe-ink);
}

.pe-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The copy is centred in its own panel rather than pinned to the site gutter, and the
   measure is capped so a wider panel adds margin instead of longer lines. */
.pe-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 clamp(24px, 3vw, 56px) clamp(32px, 5vh, 72px);
}

/* Free height below the copy. With the brand block's 5 above, the text sits a little below
   the panel's centre. */
.pe-hero__copy::after {
  content: "";
  flex: 6 0 0;
}

.pe-hero__copy > * {
  width: 100%;
  max-width: 36rem;
}

.pe-hero__copy h1 { font-size: clamp(2.6rem, 4.6vw, 4rem); }

/* The brand SVG heads the copy column and spans its full measure, so its edges line up with
   the text below. It is decorative here (empty alt): the header's branding link already
   names the site. */
.pe-hero__brand {
  --pe-hero-brand-gap: clamp(20px, 3.2vh, 36px);
  flex: 5 0 auto;
  display: flex;
  flex-direction: column;
}

/* The block runs from the top of the panel to the eyebrow, and the logo's centre sits on its
   lower-third line: the space above the centre is always twice the space below it. The
   percentage is half the logo's height (57.85 / 503.5 of the measure, halved); padding
   percentages resolve against the width, which is what the logo's height follows. */
.pe-hero__brand::before,
.pe-hero__brand::after { content: ""; }

.pe-hero__brand::before {
  flex: 2 0 auto;
  padding-top: calc(5.745% + 2 * var(--pe-hero-brand-gap));
}

.pe-hero__brand::after { flex: 1 0 var(--pe-hero-brand-gap); }

.pe-hero__brand img {
  flex: none;
  display: block;
  width: 100%;
  height: auto;
}

/* Ambient slideshow: slides stack in the media frame and cross-fade in place. */
.pe-ambient { position: relative; }

.pe-ambient__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.8s ease;
}

/* Each slide drifts diagonally while it zooms. The overhang from the scale is wider than
   the travel, so the frame never shows an edge. */
@keyframes pe-ambient-drift {
  from { transform: scale(1.06) translate3d(var(--pe-drift-x, -2%), var(--pe-drift-y, 1.4%), 0); }
  to { transform: scale(1.16) translate3d(calc(var(--pe-drift-x, -2%) * -1), calc(var(--pe-drift-y, 1.4%) * -1), 0); }
}

.pe-ambient__slide.is-active { opacity: 1; }

/* The drift is held by its own class rather than by .is-active: dropping the animation at
   the moment the slide starts fading would snap it back to its base transform in full view.
   The outgoing slide keeps moving until the cross-fade has finished. */
.pe-ambient__slide.is-playing { animation: pe-ambient-drift 11s linear forwards; }

/* Alternating directions keep consecutive slides from moving the same way. */
.pe-ambient__slide:nth-child(4n + 1) { --pe-drift-x: -2.2%; --pe-drift-y: 1.2%; }
.pe-ambient__slide:nth-child(4n + 2) { --pe-drift-x: 2.2%; --pe-drift-y: 1.4%; }
.pe-ambient__slide:nth-child(4n + 3) { --pe-drift-x: 1.8%; --pe-drift-y: -1.6%; }
.pe-ambient__slide:nth-child(4n + 4) { --pe-drift-x: -1.8%; --pe-drift-y: -1.2%; }

/* Below the split, the image stays edge to edge and the copy returns to the content gutter. */
@media (max-width: 820px) {
  .pe-hero__grid {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
  }
  .pe-hero__media {
    height: 62svh;
    min-height: 300px;
    max-height: 460px;
  }
  .pe-hero__copy {
    align-items: stretch;
    padding: 32px 20px var(--pe-space-6);
  }
  .pe-hero__copy::after,
  .pe-hero__brand::before,
  .pe-hero__brand::after { content: none; }
  .pe-hero__brand {
    display: block;
    margin-bottom: 28px;
  }
  .pe-hero__copy h1 { font-size: clamp(2.45rem, 10.5vw, 3.5rem); }
  .pe-lead { margin: 16px 0 22px; }
}

@media (max-width: 520px) {
  .pe-hero__copy { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pe-ambient__slide {
    transition: none;
    transform: none;
  }
  .pe-ambient__slide.is-playing { animation: none; }
  .pe-ambient__slide:not(.is-active) { display: none; }
}

/* =============================================================== Rentals / sales split */

.pe-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--pe-line);
}

.pe-paths article {
  padding: 44px 50px 44px 0;
  border-bottom: 1px solid var(--pe-line);
}

.pe-paths article + article {
  padding-left: 50px;
  border-left: 1px solid var(--pe-line);
}

.pe-paths a,
.pe-grid a {
  font-weight: 750;
  text-decoration: none;
  transition: color var(--pe-hover);
}

.pe-paths a:hover,
.pe-paths a:focus-visible,
.pe-grid a:hover,
.pe-grid a:focus-visible { color: var(--pe-mint); }

@media (max-width: 820px) {
  .pe-paths { grid-template-columns: 1fr; }
  .pe-paths article,
  .pe-paths article + article {
    padding: 34px 0;
    border-left: 0;
  }
}

/* =============================================================== Booth sizes */

.pe-sizes { border-top: 1px solid var(--pe-line); }

.pe-sizes a {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto auto;
  align-items: center;
  column-gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--pe-line);
  text-decoration: none;
  transition: padding-left var(--pe-hover);
}

.pe-sizes strong,
.pe-sizes span,
.pe-sizes i { line-height: 1; }

.pe-sizes strong {
  grid-row: 1;
  display: inline-block;
  font-family: var(--pe-font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  transform-origin: left center;
  transition: color var(--pe-hover), transform var(--pe-hover);
}

/* The booth type sits with the arrow at the end of the row, not beside the dimension. */
.pe-sizes span {
  grid-row: 1;
  grid-column: 3;
  color: var(--pe-muted);
  text-align: right;
}

.pe-sizes i {
  grid-row: 1;
  grid-column: 4;
  color: var(--pe-mint-deep);
  font-style: normal;
}

/* Connector drawn from the label toward the arrow on hover and keyboard focus. */
.pe-sizes a::after {
  content: "";
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  height: 2px;
  border-radius: 2px;
  background: var(--pe-mint);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--pe-hover);
}

.pe-sizes a:hover,
.pe-sizes a:focus-visible { padding-left: 14px; }

.pe-sizes a:hover strong,
.pe-sizes a:focus-visible strong {
  color: var(--pe-mint);
  transform: scale(1.08);
}

.pe-sizes a:hover::after,
.pe-sizes a:focus-visible::after { transform: scaleX(1); }

@media (max-width: 520px) {
  .pe-sizes a {
    grid-template-columns: auto 1fr auto auto;
    column-gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pe-sizes a,
  .pe-sizes strong,
  .pe-sizes a::after { transition: none; }
  .pe-sizes a:hover strong,
  .pe-sizes a:focus-visible strong { transform: none; }
}

/* =============================================================== Portfolio grid */

.pe-portfolio {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  margin-bottom: var(--pe-space-5);
}

.pe-portfolio a {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  border-radius: var(--pe-radius-sm);
  text-decoration: none;
}

.pe-portfolio a:nth-child(-n + 2) { grid-column: span 3; }

.pe-portfolio img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pe-portfolio a:nth-child(-n + 2) img { aspect-ratio: 16 / 10; }

/* The image carries the card; the title arrives on hover behind a blurred scrim, so the
   blur comes from the backdrop rather than from filtering the image. The scrim is dark
   rather than the header's glass so the brand green reads at full strength on top of it. */
.pe-portfolio strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--pe-scrim);
  color: var(--pe-mint);
  font-family: var(--pe-font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transition: opacity var(--pe-hover);
  -webkit-backdrop-filter: var(--pe-glass-filter);
  backdrop-filter: var(--pe-glass-filter);
}

.pe-portfolio a:hover strong,
.pe-portfolio a:focus-visible strong { opacity: 1; }

/* Without hover there is nothing to reveal the title, so touch devices read it as a plain
   caption under the image instead of an overlay. */
@media (hover: none) {
  .pe-portfolio strong {
    position: static;
    display: block;
    padding: 12px 0 0;
    background: none;
    color: var(--pe-ink);
    font-size: 1rem;
    text-align: left;
    opacity: 1;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pe-portfolio strong { transition: none; }
}

@media (max-width: 820px) {
  .pe-portfolio {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  .pe-portfolio a,
  .pe-portfolio a:nth-child(-n + 2) { grid-column: span 1; }
}

@media (max-width: 520px) {
  .pe-portfolio { grid-template-columns: 1fr; }
}

/* =============================================================== Card grids */

.pe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pe-space-5) var(--pe-space-6);
}

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

.pe-grid article {
  padding-top: 20px;
  border-top: 3px solid var(--pe-mint);
}

.pe-grid h3 a { font-weight: inherit; }

@media (max-width: 820px) {
  .pe-grid,
  .pe-grid--3 { grid-template-columns: 1fr; }
}

/* =============================================================== Client reviews */

/* Three compact columns. Each review is a photo of the booth it describes, a star row,
   the quote, and the reviewer. Long Google reviews are clamped by the script to a few lines
   with a control that reveals the rest; without JavaScript the full review renders. */
.pe-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pe-space-5) var(--pe-space-4);
}

.pe-review {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pe-review__photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--pe-radius-sm);
  margin-bottom: 20px;
}

.pe-review__stars {
  display: flex;
  gap: 3px;
  margin: 0 0 12px;
}

.pe-review__stars svg {
  width: 17px;
  height: 17px;
  fill: var(--pe-star);
}

.pe-review__stars svg.is-empty { fill: var(--pe-line); }

.pe-review__quote {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.pe-review__quote p {
  margin: 0;
  font-size: .96rem;
  line-height: 1.56;
}

.pe-review__quote.is-clamped p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

.pe-review__more {
  align-self: flex-start;
  margin: -4px 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pe-mint-deep);
  font: inherit;
  font-size: .9rem;
  font-weight: 750;
  cursor: pointer;
  transition: color var(--pe-hover);
}

.pe-review__more:hover,
.pe-review__more:focus-visible { color: var(--pe-ink); }

/* The reviewer's Google avatar sits beside the name, the way the review reads on Google. */
.pe-review__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--pe-line);
  font-size: .92rem;
  line-height: 1.4;
}

.pe-review__who > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pe-review__avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.pe-review__who span { color: var(--pe-muted); }

@media (max-width: 1000px) {
  .pe-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .pe-reviews__grid { grid-template-columns: 1fr; }
  .pe-review__photo { aspect-ratio: 16 / 9; }
}

/* =============================================================== Upcoming events */

/* Two columns of tight rows: the list reads at full size but takes half the scroll it would
   as a single column, so visitors who are not planning around a show pass it quickly. */
.pe-events {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  border-top: 1px solid var(--pe-line);
}

.pe-events p {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  align-items: center;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--pe-line);
}

.pe-events p > strong {
  display: inline-block;
  transform-origin: left center;
  transition: color var(--pe-hover), transform var(--pe-hover);
}

.pe-events p > i {
  height: 2px;
  margin-inline: 20px;
  border-radius: 2px;
  background: var(--pe-mint);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--pe-hover);
}

.pe-events p:hover > strong,
.pe-events p:focus-visible > strong {
  color: var(--pe-mint);
  transform: scale(1.08);
}

.pe-events p:hover > i,
.pe-events p:focus-visible > i { transform: scaleX(1); }

.pe-events p:focus-visible {
  outline: 2px solid var(--pe-mint-deep);
  outline-offset: 4px;
}

@media (max-width: 820px) {
  .pe-events { grid-template-columns: 1fr; column-gap: 0; }
}

@media (max-width: 520px) {
  .pe-events p { grid-template-columns: auto 1fr; padding: 9px 0; }
  .pe-events p > i { display: none; }
  .pe-events p > span { grid-column: 1 / -1; }
  .pe-events p:hover > strong,
  .pe-events p:focus-visible > strong { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .pe-events p > strong,
  .pe-events p > i { transition: none; }
  .pe-events p:hover > strong,
  .pe-events p:focus-visible > strong { transform: none; }
}

/* =============================================================== Closing CTA */

.pe-cta { text-align: center; }
.pe-cta .pe-container { max-width: 760px; }
.pe-cta h2 { margin-bottom: 20px; }
.pe-cta p:not(.pe-eyebrow) { margin-bottom: 28px; }

/* =============================================================== Floating project CTA */

.pe-project-pill {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 17px;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius-pill);
  background: var(--pe-veil);
  box-shadow: var(--pe-shadow-float);
  font-size: .82rem;
  font-weight: 750;
  text-decoration: none;
  transition: opacity var(--pe-hover), transform var(--pe-hover),
    background-color var(--pe-hover), border-color var(--pe-hover), color var(--pe-hover);
  -webkit-backdrop-filter: var(--pe-blur);
  backdrop-filter: var(--pe-blur);
}

.pe-project-pill span {
  color: var(--pe-mint-deep);
  transition: transform var(--pe-hover);
}

/* The floating CTA rests as glass with ink text and takes the same mint fill on hover. */
.pe-project-pill:hover,
.pe-project-pill:focus-visible {
  border-color: var(--pe-mint);
  background: var(--pe-mint);
  color: var(--pe-surface);
}

.pe-project-pill:hover span,
.pe-project-pill:focus-visible span {
  color: var(--pe-surface);
  transform: translateX(4px);
}

.pe-project-pill.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

@media (max-width: 520px) {
  .pe-project-pill {
    right: 12px;
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-navigation__branch::before,
  .pe-paths a,
  .pe-grid a,
  .pe-hero .pe-arrow,
  .pe-button,
  .pe-project-pill,
  .pe-project-pill span { transition: none; }
}

/* =============================================================== Footer */

.site-footer {
  background: var(--pe-surface);
  border-top: 1px solid var(--pe-line);
}

.footer-top { padding: var(--pe-space-7) 0 var(--pe-space-6); }

/* The map column stays wide enough for Google's place card, which collapses to a bare
   "Open in Maps" pill below roughly 620x340. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(200px, .62fr) minmax(600px, 1.5fr) minmax(190px, .55fr);
  gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}

.footer-brand .site-logo {
  max-width: clamp(190px, 15vw, 232px);
  max-height: 34px;
  margin-bottom: 26px;
}

.footer-brand address {
  color: var(--pe-muted);
  font-style: normal;
  line-height: 1.85;
}

.footer-brand address strong {
  display: block;
  color: var(--pe-ink);
  font-weight: 750;
}

.footer-map {
  position: relative;
  overflow: hidden;
  border-radius: var(--pe-radius-sm);
  box-shadow: var(--pe-shadow-float);
}

.footer-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  filter: saturate(.82);
}

.footer-heading {
  margin: 0 0 20px;
  color: var(--pe-faint);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.footer-contact ul {
  display: grid;
  gap: 14px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.footer-contact a { text-decoration: none; }

.footer-contact a:hover,
.footer-contact a:focus-visible { color: var(--pe-mint-deep); }

.footer-contact .is-phone {
  font-family: var(--pe-font-display);
  font-size: 1.45rem;
  letter-spacing: -.01em;
}

.footer-contact .is-email {
  color: var(--pe-muted);
  word-break: break-word;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: var(--pe-mint);
  text-decoration: none;
  transition: color var(--pe-hover);
}

.footer-social a:hover,
.footer-social a:focus-visible { color: var(--pe-ink); }

/* Mint base runs from the navigation band to the bottom edge of the page. */
.footer-base {
  background: var(--pe-mint);
  color: var(--pe-ink);
}

.footer-base a {
  color: inherit;
  text-decoration: none;
}

.footer-navigation-band { padding: 26px 0; }

.footer-navigation-band ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px clamp(18px, 2.6vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-navigation-band a {
  font-size: .94rem;
  font-weight: 650;
}

.footer-navigation-band a:hover,
.footer-navigation-band a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(14, 20, 17, .16);
  font-size: .84rem;
}

.footer-bottom p { margin: 0; }

.footer-bottom a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1000px) {
  .footer-top { padding: var(--pe-space-6) 0 var(--pe-space-5); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-map {
    grid-column: 1 / -1;
    order: 3;
  }
  .footer-map iframe { min-height: 260px; }
}

@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-map { grid-column: auto; }
  .footer-navigation-band ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: start;
    gap: 12px 22px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-social a { transition: none; }
}

/* =============================================================== Pages and archives */

.pe-page { padding: var(--pe-space-6) 0 var(--pe-space-7); }

.pe-page .entry__title,
.pe-archive__header h1 {
  max-width: 900px;
  margin: 0 0 28px;
  font-size: var(--pe-display-3);
  line-height: 1.06;
}

/* =============================================================== Card grids (archives) */

.pe-archive__header--centered {
  max-width: var(--pe-measure);
  margin: 0 auto var(--pe-space-5);
  text-align: center;
}
.pe-archive__header--centered h1 { margin-inline: auto; }
.pe-archive__description { color: var(--pe-muted); font-size: 1.1rem; }
.pe-archive__description p { margin: 0 0 8px; }

.pe-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 36px 28px;
}

.pe-card__link { display: block; color: inherit; text-decoration: none; }

.pe-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
  border-radius: var(--pe-radius-sm);
  overflow: hidden;
}
/* Blog cards crop their photo; booth renders sit on white like the product pages. */
.pe-archive--post .pe-card__media { background: var(--pe-wash); }
.pe-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--pe-hover);
}
.pe-archive--post .pe-card__image { object-fit: cover; }
.pe-card__link:hover .pe-card__image,
.pe-card__link:focus-visible .pe-card__image { transform: scale(1.03); }

.pe-card__body { display: block; }
.pe-card__meta { display: block; margin-bottom: 6px; color: var(--pe-muted); font-size: .9rem; }
.pe-card__title {
  display: block;
  margin: 0;
  font-family: var(--pe-font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  transition: color var(--pe-hover);
}
.pe-card__link:hover .pe-card__title,
.pe-card__link:focus-visible .pe-card__title { color: var(--pe-mint-deep); }
.pe-card__excerpt { display: block; margin-top: 8px; color: var(--pe-muted); font-size: .98rem; }
.pe-card--text .pe-card__link { padding: 24px; border: 1px solid var(--pe-line); border-radius: var(--pe-radius-sm); }

.pe-pagination { margin-top: var(--pe-space-6); text-align: center; }
.pe-pagination ul { display: inline-flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pe-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--pe-radius-pill);
  font-weight: 750;
  text-decoration: none;
  transition: background-color var(--pe-hover), color var(--pe-hover);
}
.pe-pagination .page-numbers.current { background: var(--pe-ink); color: #fff; }
.pe-pagination a.page-numbers:hover { background: var(--pe-mint); color: #fff; }

/* =============================================================== Interior pages (singular.php) */

.pe-page__hero {
  padding: var(--pe-space-5) 0 0;
}

.pe-page__hero .entry__title { margin-bottom: 0; }

.pe-page__hero + .pe-container { padding-top: var(--pe-space-4); }

/* Pages carry no hero (production hides page titles), so a page that opens with a full-bleed
   cover or row sits flush under the header, and one that opens with text keeps its air. */
.pe-page--page,
.pe-page--rentals,
.pe-page--sales { padding-top: 0; }
.pe-page--page .pe-prose > :first-child:not(.wp-block-cover):not(.alignfull):not(.kb-row-layout-wrap),
.pe-page--rentals .pe-prose > :first-child:not(.wp-block-cover):not(.alignfull),
.pe-page--sales .pe-prose > :first-child:not(.wp-block-cover):not(.alignfull) { margin-top: var(--pe-space-6); }

.entry__thumbnail {
  margin: 0 0 var(--pe-space-4);
  border-radius: var(--pe-radius-sm);
  overflow: hidden;
}

.entry__thumbnail img { display: block; width: 100%; height: auto; }

/* Legacy content was written against the Kadence theme's palette and size presets. Those
   classes and variables come from the block plugin (variables) and the theme (class rules), so
   with the theme gone the theme's half is supplied here, mapped onto the brand tokens. Declared
   on body, which beats the plugin's :root declarations wherever they are printed. */
body {
  --global-palette1: var(--pe-ink);        /* primary: buttons, icons */
  --global-palette2: var(--pe-mint-deep);  /* primary hover / accent */
  --global-palette3: var(--pe-ink);        /* headings */
  --global-palette4: var(--pe-ink);        /* body text */
  --global-palette5: var(--pe-muted);      /* secondary text */
  --global-palette6: var(--pe-muted);
  --global-palette7: var(--pe-wash);       /* light backgrounds */
  --global-palette8: var(--pe-wash);
  --global-palette9: #ffffff;
}

.pe-prose .has-theme-palette-1-color { color: var(--global-palette1); }
.pe-prose .has-theme-palette-2-color { color: var(--global-palette2); }
.pe-prose .has-theme-palette-3-color { color: var(--global-palette3); }
.pe-prose .has-theme-palette-4-color { color: var(--global-palette4); }
.pe-prose .has-theme-palette-5-color { color: var(--global-palette5); }
.pe-prose .has-theme-palette-6-color { color: var(--global-palette6); }
.pe-prose .has-theme-palette-7-color { color: var(--global-palette7); }
.pe-prose .has-theme-palette-8-color { color: var(--global-palette8); }
.pe-prose .has-theme-palette-9-color { color: var(--global-palette9); }
.pe-prose .has-theme-palette-1-background-color { background-color: var(--global-palette1); }
.pe-prose .has-theme-palette-2-background-color { background-color: var(--global-palette2); }
.pe-prose .has-theme-palette-3-background-color { background-color: var(--global-palette3); }
.pe-prose .has-theme-palette-4-background-color { background-color: var(--global-palette4); }
.pe-prose .has-theme-palette-5-background-color { background-color: var(--global-palette5); }
.pe-prose .has-theme-palette-6-background-color { background-color: var(--global-palette6); }
.pe-prose .has-theme-palette-7-background-color { background-color: var(--global-palette7); }
.pe-prose .has-theme-palette-8-background-color { background-color: var(--global-palette8); }
.pe-prose .has-theme-palette-9-background-color { background-color: var(--global-palette9); }

/* Every cover photograph is blurred so the copy on it reads first, except the page's opening
   cover (the hero at the top of rentals, sales, and similar pages), which stays sharp. */
.pe-prose .wp-block-cover .wp-block-cover__image-background {
  filter: blur(5px);
  transform: scale(1.05);
}
.pe-prose > .wp-block-cover:first-of-type .wp-block-cover__image-background {
  filter: none;
  transform: none;
}
.pe-prose .wp-block-cover { overflow: hidden; }
/* Legacy page titles without an explicit alignment sat centred under Kadence. */
.pe-page--page .pe-prose h1:not([class*="has-text-align"]) { text-align: center; }

/* Cover blocks: the dim overlay carries a palette background class and needs the colour to
   exist, otherwise white copy sits on a white page. */
.pe-prose .wp-block-cover .has-background-dim:not([class*="has-background-dim-"]) { opacity: .5; }
.pe-prose .wp-block-cover { color: var(--global-palette9); }
.pe-prose .wp-block-cover .has-theme-palette-9-color { color: #ffffff; }
/* Core's constrained layouts read these sizes from theme.json, which this theme does not ship;
   without them cover copy runs edge to edge. The prose measure and the site width stand in. */
.pe-prose {
  --wp--style--global--content-size: var(--pe-measure);
  --wp--style--global--wide-size: var(--pe-content);
}
/* Cover content spans the site width (columns and rows inside covers need the room), while
   the text blocks placed directly in a cover keep the prose measure. Paragraph spacing inside
   covers is tight: legacy covers stack oversized paragraphs as a two-line heading. */
.pe-prose .wp-block-cover .wp-block-cover__inner-container {
  max-width: var(--pe-content);
  margin-inline: auto;
  padding-inline: 24px;
}
.pe-prose .wp-block-cover .wp-block-cover__inner-container > p,
.pe-prose .wp-block-cover .wp-block-cover__inner-container > h1,
.pe-prose .wp-block-cover .wp-block-cover__inner-container > h2,
.pe-prose .wp-block-cover .wp-block-cover__inner-container > h3 {
  max-width: var(--pe-measure);
  margin-inline: auto !important; /* editor-set zero side margins would pin the measure left */
}
/* A paragraph given its own font size in the editor is a display line, not body copy. */
.pe-prose .wp-block-cover .wp-block-cover__inner-container > p[style*="font-size"] { max-width: none; }

/* Core's spacing presets, which editor-set paddings and margins reference; supplied here
   since the theme ships no theme.json. Values are WordPress's defaults. */
.pe-prose {
  --wp--preset--spacing--20: .44rem;
  --wp--preset--spacing--30: .67rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--spacing--60: 2.25rem;
  --wp--preset--spacing--70: 3.38rem;
  --wp--preset--spacing--80: 5.06rem;
}
.pe-prose .wp-block-cover .wp-block-cover__inner-container > p { margin-bottom: .5em; }
.pe-prose .wp-block-cover .wp-block-cover__inner-container > h2,
.pe-prose .wp-block-cover .wp-block-cover__inner-container > h3 { margin-top: 0; }

/* Columns: the first block in a column sits flush with the column top, as in Kadence. */
.pe-prose .wp-block-column > :first-child,
.pe-prose .kt-inside-inner-col > :first-child { margin-top: 0; }
.pe-prose .wp-block-columns { margin: var(--pe-space-4) 0; }

/* "Card" columns (a filled heading over a filled paragraph, as on the rentals and sales
   landing pages): headings share one height and the text panels stretch to match, so the
   three columns read as one row whatever the copy length. */
.pe-prose .wp-block-column:has(> h3.has-background, > h2.has-background) { display: flex; flex-direction: column; }
.pe-prose .wp-block-column > h3.has-background,
.pe-prose .wp-block-column > h2.has-background {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4em;
  margin: 0 0 16px;
  padding: 12px 18px;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  line-height: 1.15;
}
.pe-prose .wp-block-column > p.has-background {
  flex: 1;
  margin: 0;
  padding: 28px 24px;
  border-radius: var(--pe-radius-sm);
}

/* Rental and sale layouts: the model name opens the left column at display size; any later
   H2 in a column (the "What's included" list heading) steps down so it does not compete. A
   button that closes a column gets air above it. */
.pe-prose .kt-inside-inner-col > h2:not(:first-child) { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-top: var(--pe-space-5); }
.pe-prose .kt-inside-inner-col > .wp-block-kadence-advancedbtn:not(:first-child) { margin-top: 32px; }
/* Buttons on photo covers: brand green with white text, ink on interaction. */
.pe-prose .wp-block-cover .kb-button,
.pe-prose .wp-block-cover .kb-btn,
.pe-prose .wp-block-cover .wp-block-button__link {
  background: var(--pe-mint) !important;
  border-color: var(--pe-mint) !important;
  color: #ffffff !important;
}
.pe-prose .wp-block-cover .kb-button:hover,
.pe-prose .wp-block-cover .kb-button:focus-visible,
.pe-prose .wp-block-cover .kb-btn:hover,
.pe-prose .wp-block-cover .kb-btn:focus-visible,
.pe-prose .wp-block-cover .wp-block-button__link:hover {
  background: var(--pe-ink) !important;
  border-color: var(--pe-ink) !important;
  color: #ffffff !important;
}

/* Kadence buttons wear the theme's pill and colours, so legacy pages match the homepage
   without editing each block. Their generated CSS is id-scoped, hence the !important. */
.pe-prose .kb-button,
.pe-prose .kb-btn {
  border-radius: var(--pe-radius-pill) !important;
  background: var(--pe-ink) !important;
  border-color: var(--pe-ink) !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  padding: var(--pe-pill-pad) !important;
  transition: background-color var(--pe-hover), color var(--pe-hover), border-color var(--pe-hover) !important;
}
/* Pills hug their label even where the block asked for a full-width button, and stay centred
   in their column. A button that introduces an image gets air before the picture. */
.pe-prose .kb-button.kt-btn-width-type-full { width: auto !important; }
.pe-prose .kb-buttons-wrap { justify-content: center; }
.pe-prose .wp-block-kadence-advancedbtn + .wp-block-kadence-image,
.pe-prose .wp-block-kadence-advancedbtn + .wp-block-image,
.pe-prose .wp-block-kadence-advancedbtn + figure { margin-top: 28px; }
.pe-prose .kb-button:hover,
.pe-prose .kb-button:focus-visible,
.pe-prose .kb-btn:hover,
.pe-prose .kb-btn:focus-visible {
  background: var(--pe-mint) !important;
  border-color: var(--pe-mint) !important;
  color: #ffffff !important;
}

/* =============================================================== 3D viewer */

/* The viewer's accent follows the brand green whether the mu-plugin or the theme copy
   rendered it (the plugin reads --global-palette1, which the theme maps to ink). */
.pe3d { --pe3d-accent: var(--pe-mint); }
.pe3d-thumb, .pe3d-nav { transition: border-color var(--pe-hover), background-color var(--pe-hover); }
.pe3d-thumb.is-active,
.pe3d-thumb:hover { border-color: var(--pe-mint) !important; }
.pe3d-thumb-3d.is-active { color: var(--pe-ink); }
/* Images-only mode: the stage shows the photo on white, contained like the 3D scene. */
.pe3d--images .pe3d-stage { background: #fff; }

/* =============================================================== Kadence dividers and accordions */

/* The rule lines beside "FAQs", "Contact Us", "Portfolio": a three-column row of spacer |
   heading | spacer. Only those dividers become the brand rule; spacers used purely for air
   (Kadence gives their divider a white or near-transparent colour) keep Kadence's styling. */
.pe-prose .kt-row-column-wrap.kt-has-3-columns:has(> .wp-block-kadence-column:nth-child(2) :is(h1, h2, h3, h4, .wp-block-kadence-advancedheading)) .kt-divider {
  height: 4px !important;
  border: 0 !important;
  border-radius: 999px;
  background: var(--pe-mint) !important;
  opacity: 1 !important;
}

.pe-prose .kt-accordion-wrap { max-width: var(--pe-measure) !important; margin-inline: auto; }
.pe-prose .kt-accordion-pane { margin-bottom: 10px; }
.pe-prose .kt-blocks-accordion-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px !important;
  border: 1px solid var(--pe-line) !important;
  border-left: 4px solid var(--pe-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--pe-ink) !important;
  font-family: var(--pe-font-body) !important;
  font-size: 1.05rem !important;
  font-weight: 650 !important;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--pe-hover), background-color var(--pe-hover);
}
.pe-prose .kt-blocks-accordion-header:hover,
.pe-prose .kt-blocks-accordion-header:focus-visible {
  border-color: var(--pe-mint) !important;
  background: var(--pe-wash) !important;
}
.pe-prose .kt-blocks-accordion-header.kt-accordion-panel-active,
.pe-prose .kt-blocks-accordion-header[aria-expanded="true"] {
  border-color: var(--pe-mint) !important;
  border-left-color: var(--pe-mint) !important;
  background: var(--pe-wash) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.pe-prose .kt-blocks-accordion-title-wrap { flex: 1; }
.pe-prose .kt-blocks-accordion-icon-trigger { flex: 0 0 auto; color: var(--pe-mint-deep) !important; }
.pe-prose .kt-blocks-accordion-icon-trigger::before,
.pe-prose .kt-blocks-accordion-icon-trigger::after { background: var(--pe-mint-deep) !important; }
.pe-prose .kt-accordion-panel {
  border: 1px solid var(--pe-mint) !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  background: #fff;
}
.pe-prose .kt-accordion-panel-inner { padding: 18px 22px 22px !important; }
.pe-prose .kt-accordion-panel-inner p:last-child { margin-bottom: 0; }
.pe-prose .kt-accordion-panel-inner p { font-size: 1rem !important; color: var(--pe-muted); }
/* Section titles above each accordion group. */
.pe-prose .kt-inside-inner-col > .wp-block-kadence-accordion { margin: 18px 0 var(--pe-space-5); }

/* A row of three headings (phone | separator | email on the contact page) sizes each column
   to its text and centres the group, instead of three equal thirds that push the phone right
   and the email left. */
.pe-prose .kt-row-column-wrap.kt-has-3-columns:has(> .wp-block-kadence-column:first-child .wp-block-kadence-advancedheading):has(> .wp-block-kadence-column:nth-child(2) .wp-block-kadence-advancedheading):has(> .wp-block-kadence-column:last-child .wp-block-kadence-advancedheading) {
  grid-template-columns: auto auto auto !important;
  justify-content: center;
  column-gap: 28px;
}
.pe-prose .kt-row-column-wrap.kt-has-3-columns:has(> .wp-block-kadence-column:first-child .wp-block-kadence-advancedheading):has(> .wp-block-kadence-column:last-child .wp-block-kadence-advancedheading) .wp-block-kadence-advancedheading { text-align: center !important; }

/* =============================================================== Gravity Forms */

/* The plugin's base theme is kept for layout and validation; the theme supplies the type,
   controls, and button so the forms read as part of the site. */
.gform_wrapper.gravity-theme {
  --gf-color-primary: var(--pe-ink);
  --gf-color-primary-contrast: #ffffff;
  --gf-color-primary-darker: var(--pe-mint-deep);
  --gf-ctrl-border-color: var(--pe-line);
  --gf-ctrl-radius: var(--pe-radius-sm);
  font-family: var(--pe-font-body);
}
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label { font-weight: 700; font-size: 1rem; }
.gform_wrapper.gravity-theme .gfield_required,
.gform_wrapper.gravity-theme .gfield_required_text { color: var(--pe-mint-deep) !important; }
/* Forms sit on a comfortable measure. Legacy form pages park the form in the middle column of a
   spacer | form | spacer row, which squeezed it; a row holding a form collapses to one column
   and the spacer columns (they carry nothing else) step aside. */
.pe-prose .gform_wrapper { width: 100%; max-width: 960px; margin-inline: auto; }
.pe-prose .kt-row-column-wrap:has(.gform_wrapper) { grid-template-columns: minmax(0, 1fr) !important; }
.pe-prose .kt-row-column-wrap:has(.gform_wrapper) > .wp-block-kadence-column:not(:has(.gform_wrapper)) { display: none; }
.gform_wrapper.gravity-theme input:not([type="submit"]):not([type="button"]):not([type="file"]),
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
  padding: 12px 14px;
  border: 1px solid #c9d0cc;
  border-radius: var(--pe-radius-sm);
  background: #ffffff;
  font-size: 1rem;
  font-family: inherit;
  color: var(--pe-ink);
  transition: border-color var(--pe-hover), box-shadow var(--pe-hover);
}
.gform_wrapper.gravity-theme input:not([type="submit"]):focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
  outline: none;
  border-color: var(--pe-mint-deep);
  box-shadow: 0 0 0 3px rgba(128, 224, 180, .35);
}
.gform_wrapper.gravity-theme .ginput_container_fileupload .gform_drop_area,
.gform_wrapper.gravity-theme .gform_fileupload_multifile .gform_drop_area {
  border: 1px dashed #c9d0cc;
  border-radius: var(--pe-radius-sm);
  background: var(--pe-wash);
  padding: 28px;
}
.gform_wrapper.gravity-theme .gform_button,
.gform_wrapper.gravity-theme .gform-theme-button,
.gform_wrapper.gravity-theme .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pe-pill-pad);
  border: 0;
  border-radius: var(--pe-radius-pill);
  background: var(--pe-ink);
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color var(--pe-hover), color var(--pe-hover);
}
.gform_wrapper.gravity-theme .gform_button:hover,
.gform_wrapper.gravity-theme .gform_button:focus-visible,
.gform_wrapper.gravity-theme .gform-theme-button:hover { background: var(--pe-mint); color: #ffffff; }
.gform_wrapper.gravity-theme .gform_fields { row-gap: 22px !important; }
.gform_wrapper.gravity-theme .gfield_label { margin-bottom: 8px !important; }
.gform_wrapper.gravity-theme .ginput_complex label,
.gform_wrapper.gravity-theme .gfield_description { color: var(--pe-muted); font-size: .92rem; }
.gform_wrapper.gravity-theme .gform_footer { margin-top: 20px; padding: 0; }
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message,
.gform_wrapper.gravity-theme .gform_validation_errors {
  border-radius: var(--pe-radius-sm);
}
.gform_wrapper.gravity-theme .cf-turnstile { margin: 10px 0 4px; }

/* Kadence's size presets, on the theme's scale. Core's own "large" (36px) is far too big for
   17px body copy, so it is retuned too. */
/* Core prints its preset classes with !important, so these carry it too. */
.pe-prose .has-small-font-size { font-size: .92rem !important; }
.pe-prose .has-medium-font-size { font-size: 1.1rem !important; }
.pe-prose .has-large-font-size { font-size: 1.25rem !important; line-height: 1.5; }
.pe-prose h2.has-large-font-size,
.pe-prose h3.has-large-font-size { font-size: clamp(1.3rem, 1.8vw, 1.6rem) !important; line-height: 1.2; }
.pe-prose .has-larger-font-size,
.pe-prose .has-x-large-font-size,
.pe-prose .has-xlarge-font-size { font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important; line-height: 1.2; }
.pe-prose .has-xxlarge-font-size { font-size: var(--pe-display-3) !important; line-height: 1.08; }
.pe-prose .has-xxxlarge-font-size,
.pe-prose .has-huge-font-size { font-size: var(--pe-display-2) !important; line-height: 1.06; }

/* Legacy inline hacks tuned for the old 24px Mallanna body: near-zero line-heights that
   stacked lines under Kadence now overlap, and inline paragraph sizes of 23–28px read as
   headings. Normalise them; explicitly sized display lines (40px+) keep a tight leading. */
.pe-prose p[style*="line-height:0"] { line-height: 1.5 !important; }
.pe-prose p[style*="line-height:0"][style*="font-size:4"],
.pe-prose p[style*="line-height:0"][style*="font-size:5"],
.pe-prose p[style*="line-height:0"][style*="font-size:6"] { line-height: 1.15 !important; }
.pe-prose .kt-inside-inner-col > p[style*="font-size:2"],
.pe-prose .wp-block-column > p[style*="font-size:2"] { font-size: 1.2rem !important; }
.pe-prose p[style*="font-size:23px"] { font-size: 1.15rem !important; }

/* Icon columns: every column's image gets the same margin whatever the editor set inline,
   so headings line up across the row. */
.pe-prose .wp-block-column > .wp-block-image,
.pe-prose .wp-block-column > .wp-block-image figure,
.pe-prose .wp-block-column > figure.wp-block-image { margin: 0 auto 18px !important; }

/* Feature rows: a cover used as a label card sits compact beside its copy. */
.pe-prose .kt-inside-inner-col > .wp-block-cover,
.pe-prose .wp-block-column > .wp-block-cover { min-height: 0 !important; padding: 20px 16px; }
.pe-prose .kt-inside-inner-col > .wp-block-cover .wp-block-cover__inner-container > p { margin: 0; }
.pe-prose .kt-row-column-wrap.kt-row-valign-top { align-items: center; }

/* Prose: the theme's type applied to whatever blocks the editor used. Text blocks placed
   directly in the content are held to a readable measure and centred, since legacy pages are
   centre-aligned; layout blocks (rows, columns, media/text, galleries) keep the full width. */
.pe-prose { --pe-measure: 960px; font-size: var(--pe-text-body); line-height: 1.65; }
/* Legacy pages were laid out at Kadence's full content width, with their grids and text sharing
   one edge; they keep that width and a slightly larger body size so lines stay readable. Blog
   posts read best on a narrower measure, and every image in a post is held to it. */
.pe-page--page .pe-prose,
.pe-page--rentals .pe-prose,
.pe-page--sales .pe-prose { --pe-measure: var(--pe-content); font-size: 18px; }
.pe-page--post,
.pe-page--post .pe-prose { --pe-measure: 820px; }
/* The post's title, date, and featured image share the copy's column. */
.pe-page--post .pe-page__hero .pe-container > * { max-width: var(--pe-measure); margin-inline: auto; }
.pe-page--post .pe-page__hero + .pe-container > .entry { max-width: var(--pe-measure); margin-inline: auto; }
.pe-page--post .pe-prose > figure,
.pe-page--post .pe-prose > .wp-block-image,
.pe-page--post .pe-prose > .wp-block-gallery,
.pe-page--post .pe-prose > .wp-block-embed,
.pe-page--post .pe-prose > .wp-block-media-text,
.pe-page--post .pe-prose > .wp-block-table,
.pe-page--post .pe-prose > .wp-block-quote,
.pe-page--post .pe-prose > .wp-block-columns,
.pe-page--post .pe-prose > .kb-row-layout-wrap { max-width: var(--pe-measure); margin-inline: auto; }
.pe-page--post .pe-prose img { display: block; margin-inline: auto; border-radius: var(--pe-radius-sm); }
.pe-page--post .pe-prose figcaption { margin-top: 8px; color: var(--pe-muted); font-size: .9rem; text-align: center; }
.pe-page--post .entry__thumbnail { max-width: var(--pe-measure); margin-inline: auto; }

.pe-prose > p,
.pe-prose > h1,
.pe-prose > h2,
.pe-prose > h3,
.pe-prose > h4,
.pe-prose > ul,
.pe-prose > ol,
.pe-prose > blockquote,
.pe-prose > .wp-block-kadence-iconlist,
.pe-prose > .wp-block-buttons,
.pe-prose > .wp-block-kadence-advancedbtn {
  max-width: var(--pe-measure);
  margin-inline: auto;
}

.pe-prose h1,
.pe-prose h2,
.pe-prose h3,
.pe-prose h4 {
  font-family: var(--pe-font-display);
  line-height: 1.12;
  letter-spacing: -.01em;
}

.pe-prose h1 { margin: 0 auto 20px; font-size: var(--pe-display-3); }
.pe-prose h2 { margin: var(--pe-space-6) auto 18px; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.pe-prose h3 { margin: var(--pe-space-4) auto 12px; font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.pe-prose h4 { margin: var(--pe-space-3) auto 10px; font-size: 1.1rem; }
.pe-prose p { margin: 0 auto 1.1em; }
.pe-prose p:empty { display: none; }
.pe-prose ul, .pe-prose ol { margin: 0 auto 1.2em; padding-left: 1.3em; }
.pe-prose li { margin-bottom: .35em; }
.pe-prose a:not(.kb-button):not(.wp-block-button__link) { color: var(--pe-mint-deep); text-underline-offset: 3px; }
.pe-prose a:not(.kb-button):not(.wp-block-button__link):hover { color: var(--pe-ink); }
.pe-prose img { max-width: 100%; height: auto; }
.pe-prose figure { margin: 0 auto var(--pe-space-4); }
.pe-prose blockquote {
  padding-left: 22px;
  border-left: 3px solid var(--pe-mint);
  color: var(--pe-muted);
}
.pe-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--pe-space-4); }
.pe-prose th, .pe-prose td { padding: 10px 12px; border-bottom: 1px solid var(--pe-line); text-align: left; }
.pe-prose hr { margin: var(--pe-space-5) auto; border: 0; border-top: 1px solid var(--pe-line); }
.pe-prose .wp-block-media-text { margin: var(--pe-space-5) 0; }

/* Full-bleed and wide blocks escape the container the way the homepage sections do. */
.pe-prose .alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
.pe-prose .alignwide { width: min(var(--pe-content-wide), 100vw - 40px); max-width: none; margin-inline: calc(50% - min(var(--pe-content-wide), 100vw - 40px) / 2); }

/* Core buttons take the theme's pill so they match the homepage without editing pages. */
.pe-prose .wp-block-button__link {
  border-radius: var(--pe-radius-pill);
  padding: var(--pe-pill-pad);
  font-weight: 750;
  text-decoration: none;
}

.pe-page .post-navigation {
  margin-top: var(--pe-space-6);
  padding-top: var(--pe-space-3);
  border-top: 1px solid var(--pe-line);
}
.pe-page .post-navigation .nav-links { display: flex; justify-content: space-between; gap: 20px; }
.pe-page .post-navigation a { font-weight: 750; text-decoration: none; }

.pe-archive__header p {
  margin: 0 0 8px;
  color: var(--pe-muted);
}

.pe-archive__list { border-top: 1px solid var(--pe-line); }

.pe-archive__item {
  padding: 28px 0;
  border-bottom: 1px solid var(--pe-line);
}

.pe-archive__item h2 {
  margin: 0 0 8px;
  font-family: var(--pe-font-display);
  font-size: 1.5rem;
  line-height: 1.16;
}

.pe-archive__item h2 a { text-decoration: none; }

.pe-archive__item h2 a:hover,
.pe-archive__item h2 a:focus-visible { color: var(--pe-mint-deep); }

.pe-archive__item p {
  margin: 0;
  color: var(--pe-muted);
}

.pe-page .posts-navigation { margin-top: 36px; }

.pe-page .posts-navigation a {
  font-weight: 750;
  text-decoration: none;
}

/* =============================================================== Booth carousel */

/* An alternative to .pe-sizes, chosen in the Customizer. Both presentations coexist so
   switching back is a setting rather than a deploy. */
/* Equal columns so the footprints read as one evenly spread row. */
.pe-booths__sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--pe-line);
}

.pe-booths__size {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--pe-radius-pill);
  background: transparent;
  color: var(--pe-ink);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--pe-hover), color var(--pe-hover);
}

.pe-booths__size strong {
  font-family: var(--pe-font-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.01em;
}

.pe-booths__size span {
  color: var(--pe-muted);
  font-size: .82rem;
}

.pe-booths__size:hover { background: var(--pe-wash); }

/* The size the track is currently showing reads as a filled brand pill. */
.pe-booths__size[aria-current="true"] {
  background: var(--pe-mint);
  color: var(--pe-surface);
}

.pe-booths__size[aria-current="true"] span { color: inherit; }

.pe-booths__intro {
  max-width: 700px;
  margin: -28px 0 32px;
  color: var(--pe-muted);
}

/* The track fades at both edges so a partially visible card reads as "more this way"
   rather than as a cut-off image. The mask is dropped at each end when there is nothing
   further to scroll to. */
.pe-booths__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 24px) / 4);
  gap: 24px;
  padding: 4px 0 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  --pe-fade: 68px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pe-fade),
    #000 calc(100% - var(--pe-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--pe-fade),
    #000 calc(100% - var(--pe-fade)), transparent 100%);
}

.pe-booths__track::-webkit-scrollbar { display: none; }

.pe-booths.is-start .pe-booths__track {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--pe-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--pe-fade)), transparent 100%);
}

.pe-booths.is-end .pe-booths__track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pe-fade));
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--pe-fade));
}

.pe-booths.is-start.is-end .pe-booths__track {
  -webkit-mask-image: none;
  mask-image: none;
}

.pe-booths__track:focus-visible {
  outline: 2px solid var(--pe-mint-deep);
  outline-offset: 4px;
}

/* No scroll-snap here: the track drifts continuously, and mandatory snapping pulls every
   small increment back to the nearest card, which stops the animation dead. */
.pe-booths__card {
  text-decoration: none;
  transition: transform var(--pe-hover);
}

.pe-booths__card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.pe-booths__card:hover,
.pe-booths__card:focus-visible { transform: scale(1.04); }

.pe-booths__more { margin: 0; }

.pe-booths__more a {
  color: var(--pe-mint-deep);
  font-weight: 750;
  text-decoration: none;
}

.pe-booths__more span {
  display: inline-block;
  transition: transform var(--pe-hover);
}

.pe-booths__more a:hover span,
.pe-booths__more a:focus-visible span { transform: translateX(4px); }

@media (max-width: 820px) {
  .pe-booths__track {
    grid-auto-columns: 78%;
    --pe-fade: 36px;
  }
  .pe-booths__size { padding: 9px 15px; }
  .pe-booths__size strong { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pe-booths__size,
  .pe-booths__card,
  .pe-booths__more span { transition: none; }
  /* The drift is also cancelled in script; this covers the smooth-scroll jumps. */
  .pe-booths__track { scroll-behavior: auto; }
  .pe-booths__card:hover,
  .pe-booths__card:focus-visible { transform: none; }
}