/* ==========================================================================
   Portfolio Moguls — Components
   Header, footer, watermark, buttons, chips, badges, breadcrumb, contact bar.
   Mobile-first. The 900px breakpoint matches the design's own `vw < 900`
   desktop/mobile threshold, so the switch happens exactly where it does in
   the source.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Watermark — one fixed navy crest at 2%, behind all content.
   z-index:-1 paints it above the root background but below every in-flow
   element, so navy sections cover it with no extra logic. Placeholder mark.
   -------------------------------------------------------------------------- */

.pm-watermark {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  /* Opacity is set inline from the Customizer (see template-parts/watermark.php).
     The token remains the fallback for the brief window before that attribute
     is parsed, and for any caller rendering the element without it. */
  opacity: var(--pm-watermark-opacity);
}

/* max-width: none matters: base.css clamps every img/svg to 100%, which
   silently turned 130vw into 100vw here — measured, not guessed. The badge's
   artwork also only fills ~76% of its canvas, so it needs the full 130vw for
   the visible circle to span the screen the way the old typographic crest
   did. Full bleed is the client's chosen presentation (2026-08-06): the
   vertical crop on tall screens is part of the look, not a defect. */
.pm-watermark svg,
.pm-watermark__img {
  width: 130vw;
  max-width: none;
  height: auto;
  flex: none;
}

@media print {
  .pm-watermark { display: none; }
}

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

/* Oxford pattern, proportioned (2026-08-06 brief):

   TOP OF PAGE — a transparent absolute layer that scrolls away with the page.
   The navy logo TILE sits flush to the top of the viewport (zero top margin),
   left-aligned to the content container; it is a true square (76 / 104 / 140
   by width) and hangs below the nav row into the hero. The nav is a navy PILL
   on the right. The row's height IS the tile's height with align-items:center,
   which is what makes the pill's vertical centre coincide with the tile's —
   the ±2px rule holds by construction, not by tuned margins.

   SCROLLED PAST THE HERO — nav.js swaps to .pm-header--compact: a fixed 64px
   navy band, small mark left, nav right, everything centred. The flush-tile
   treatment exists only at top of page.

   The transparent layer ignores the pointer; interactive children re-enable
   it, so the see-through middle never blocks clicks on content beneath. */
.pm-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: transparent;
  color: var(--pm-on-navy);
  pointer-events: none;
}

.pm-header a,
.pm-header button,
.pm-header nav,
.pm-mobile-nav {
  pointer-events: auto;
}

/* Pages without a hero start below the floating furniture. */
.pm-pad-top #pm-main { padding-top: 100px; }

/* The row: height = tile height, so centring the row centres the pill on the
   tile. --pm-tile is the single knob the breakpoints turn. */
.pm-header__inner {
  --pm-tile: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-space-4);
  min-height: var(--pm-tile);
}

/* ---- The logo tile ---- */

/* A perfect square by declaration: aspect-ratio pins the shape to CSS, never
   to whatever the logo image happens to be — a portrait upload cannot stretch
   the tile. The emblem's ~16% inset lives on the IMAGE (68% box), not as
   percentage padding here: %-padding resolves against the PARENT's width, and
   16% of the header row inflated the tile to 394px before the gate caught it. */
.pm-wordmark {
  font-family: var(--pm-font-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: var(--pm-wordmark-tracking);
  color: var(--pm-on-navy);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pm-navy);
  border-radius: 0 0 var(--pm-radius-sm) var(--pm-radius-sm);
  width: var(--pm-tile);
  aspect-ratio: 1 / 1;
  padding: 0;
  flex: none;
  align-self: flex-start;
  box-shadow: var(--pm-shadow-card);
}

.pm-wordmark:hover,
.pm-wordmark:focus-visible { color: var(--pm-on-navy); }

/* 68% box = the ~16% inset a side; contain centres the emblem whatever its
   intrinsic shape. --pm-logo-h drives only the compact bar below. */
.pm-wordmark__img {
  display: block;
  width: 68%;
  height: 68%;
  object-fit: contain;
  flex: none;
}

.pm-wordmark__name {
  font-size: 13px;
  letter-spacing: var(--pm-wordmark-tracking);
  white-space: nowrap;
}

/* ---- Compact bar (past the hero; nav.js applies the classes) ---- */

.pm-header--compact {
  position: fixed;
  background: var(--pm-navy);
  border-bottom: var(--pm-rule-gold);
  transform: translateY(-100%);
  pointer-events: auto;
}

.pm-header--compact.pm-header--shown {
  transform: translateY(0);
  transition: transform 240ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .pm-header--compact.pm-header--shown { transition: none; }
}

/* In the band the tile stops being a tile: the row is 64px, the mark small,
   everything centred like the old header. */
.pm-header--compact .pm-header__inner {
  --pm-tile: 64px;
  min-height: 64px;
}

.pm-header--compact .pm-wordmark {
  width: auto;
  height: auto;
  aspect-ratio: auto;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  align-self: center;
  padding: 0;
}

.pm-header--compact .pm-wordmark__img {
  width: auto;
  height: var(--pm-logo-h, 40px);
  object-fit: fill;
}

.pm-header--compact .pm-wordmark__img {
  width: auto;
  height: var(--pm-logo-h, 40px);
}

/* Desktop nav — hidden below 900. From 900 it is a self-grounded navy pill,
   Oxford-style, so it reads over the hero photograph, over white pages and
   over the navy pageheads alike. */
.pm-nav { display: none; }

.pm-nav__link {
  font: var(--pm-nav);
  color: var(--pm-on-navy-soft);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.pm-nav__link:hover,
.pm-nav__link:focus-visible { color: var(--pm-on-navy); }

.pm-nav__link.is-active {
  color: var(--pm-on-navy);
  border-bottom-color: var(--pm-action);
}

.pm-nav__divider {
  width: 1px;
  height: 22px;
  background: #4D5972;
  flex: none;
}

/* Below 900 the right-hand pill holds the Menu button and the CTA together —
   the brief's mobile composition. The pill is the ground; the button inside
   goes quiet (no own border box beyond a hairline). */
.pm-header__mobilepill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pm-navy);
  border-radius: 6px;
  padding: 6px;
  box-shadow: var(--pm-shadow-card);
  pointer-events: auto;
}

.pm-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--pm-space-2);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--pm-on-navy);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--pm-radius-sm);
}

/* The CTA inside the mobile pill runs tighter than the standard header button
   so Menu + CTA + tile all fit at 390 (measured: the full padding collided). */
.pm-header__mobilepill .pm-btn--header {
  padding: 9px 11px;
  font-size: 12.5px;
}

/* A floating navy card, since the band it used to sit inside is gone. */
.pm-mobile-nav {
  background: var(--pm-navy);
  border-radius: var(--pm-radius-lg);
  margin: 10px var(--pm-gutter) 0;
  padding: var(--pm-space-2) var(--pm-space-4) var(--pm-space-4);
  box-shadow: var(--pm-shadow-float);
}

.pm-mobile-nav[hidden] { display: none; }

.pm-mobile-nav__list {
  display: flex;
  flex-direction: column;
}

.pm-mobile-nav__link {
  color: var(--pm-on-navy-soft);
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 15px;
}

.pm-mobile-nav__link.is-active {
  color: var(--pm-on-navy);
  font-weight: 600;
}

.pm-mobile-nav__cta {
  margin-top: var(--pm-space-3);
  text-align: center;
}

@media (min-width: 768px) {
  .pm-header__inner { --pm-tile: 88px; }
}

@media (min-width: 900px) {
  .pm-wordmark__name { font-size: 15px; }

  .pm-pad-top #pm-main { padding-top: 124px; }

  /* The links pill: 56px at every desktop width (correction pass). Height is
     explicit because the centring rule is a measured contract. 15px gaps, not
     22 — same eight-item worst case as ever; roomier at 1024. */
  .pm-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--pm-navy);
    border-radius: 6px;
    height: 56px;
    padding: 0 16px;
    box-shadow: var(--pm-shadow-card);
  }

  .pm-header--compact .pm-nav {
    background: transparent;
    box-shadow: none;
    height: auto;
    padding: 0;
  }

  .pm-header__mobilepill,
  .pm-menu-toggle,
  .pm-mobile-nav { display: none; }
}

@media (min-width: 1024px) {
  .pm-header__inner { --pm-tile: 112px; }
  .pm-nav { gap: 22px; height: 56px; padding: 0 20px; }
  .pm-header--compact .pm-nav { height: auto; padding: 0; }
  .pm-pad-top #pm-main { padding-top: 148px; }
}



/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.pm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--pm-font-ui);
  border-radius: var(--pm-radius);
  border: 1px solid transparent;
  text-align: center;
  /* Deliberately NOT nowrap. Several CTA labels in this design run past 40
     characters ("See how it works for Non-Resident Bangladeshis"), and a
     nowrap button sets its container's min-content width — which pushed the
     property page 9px past the viewport at 390px. Buttons wrap; the pills
     and chips that must stay on one line set nowrap themselves. */
  white-space: normal;
  text-wrap: balance;
}

/* Primary — the action cyan. Text and icons are NAVY: white on this blue is
   1.8:1 and unreadable, navy is 7.9:1. */
.pm-btn--primary {
  background: var(--pm-action);
  color: var(--pm-action-text);
  padding: 14px 22px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: var(--pm-shadow-cta);
}

.pm-btn--primary:hover,
.pm-btn--primary:focus-visible {
  background: var(--pm-action-hover);
  color: var(--pm-action-text);
}

/* Secondary — navy outline on light ground */
.pm-btn--secondary {
  background: transparent;
  color: var(--pm-navy);
  border-color: var(--pm-navy);
  padding: 11px 18px;
  font-weight: 600;
  font-size: 14px;
}

/* Outline stays navy; the hover fill is where the action colour appears, with
   navy text on it rather than white. */
.pm-btn--secondary:hover,
.pm-btn--secondary:focus-visible {
  background: var(--pm-action);
  color: var(--pm-action-text);
  border-color: var(--pm-action);
}

/* The header CTA, filled. Sits on navy, so the cyan reads at 7.9:1 against
   the band and its own navy label reads at 7.9:1 against the fill. */
.pm-btn--header {
  background: var(--pm-action);
  color: var(--pm-action-text);
  padding: 9px 17px;
  border-radius: var(--pm-radius-sm);
  font-weight: 700;
  font-size: 13.5px;
}

.pm-btn--header:hover,
.pm-btn--header:focus-visible {
  background: var(--pm-action-hover);
  color: var(--pm-action-text);
}

/* Outline on navy ground — in-band actions away from the header */
.pm-btn--on-navy {
  background: transparent;
  color: var(--pm-on-navy);
  border-color: var(--pm-on-navy-border);
  padding: 8px 15px;
  font-weight: 600;
  font-size: 13.5px;
}

.pm-btn--on-navy:hover,
.pm-btn--on-navy:focus-visible {
  background: var(--pm-action);
  color: var(--pm-action-text);
  border-color: var(--pm-action);
}

/*
 * WhatsApp — the channel's own identity, not ours. White ground, hairline
 * border, navy label, and the official mark in WhatsApp green. Deliberately
 * quieter than the brand primary: it is an alternative route, not the ask.
 */
.pm-btn--whatsapp {
  background: var(--pm-white);
  color: var(--pm-navy);
  border-color: var(--pm-border);
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14.5px;
}

/* The mark is drawn with fill="currentColor", so setting the svg's own colour
   is what puts green on the glyph and nowhere else — the label stays navy. */
.pm-btn--whatsapp svg { color: var(--pm-green); }

.pm-btn--whatsapp:hover,
.pm-btn--whatsapp:focus-visible {
  background: var(--pm-whatsapp-wash);
  border-color: var(--pm-whatsapp-edge);
  color: var(--pm-navy);
}

/*
 * Call — the quietest of the three. Same white ground, but no colour anywhere:
 * the phone glyph takes the navy label's colour.
 */
.pm-btn--call {
  background: var(--pm-white);
  color: var(--pm-navy);
  border-color: var(--pm-border);
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14.5px;
}

.pm-btn--call:hover,
.pm-btn--call:focus-visible {
  background: var(--pm-white);
  border-color: var(--pm-navy);
  color: var(--pm-navy);
}

.pm-btn--lg {
  padding: 13px 20px;
  font-size: 15px;
}

.pm-btn--block { width: 100%; }

/* Tertiary — text link with chevron */
.pm-link-arrow {
  font-family: var(--pm-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-navy);
}

.pm-link-arrow::after {
  content: " \203A";
  color: var(--pm-link-hover);
}

.pm-link-arrow:hover,
.pm-link-arrow:focus-visible { color: var(--pm-link-hover); }

/* --------------------------------------------------------------------------
   Chips & badges
   -------------------------------------------------------------------------- */

.pm-chip {
  display: inline-block;
  background: var(--pm-surface-alt);
  border: 1px solid var(--pm-border);
  color: var(--pm-text);
  padding: 6px 11px;
  border-radius: var(--pm-radius-sm);
  font: var(--pm-chip);
}

.pm-chip--link { color: var(--pm-navy); }

.pm-chip--link:hover,
.pm-chip--link:focus-visible {
  background: var(--pm-surface-deep);
  color: var(--pm-navy);
}

/* Verified badge — green is reserved for this and the checkpoint ticks. */
.pm-verified {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--pm-green);
  color: var(--pm-white);
  padding: 7px 12px;
  border-radius: var(--pm-radius);
  font-family: var(--pm-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pm-verified--compact {
  gap: 6px;
  padding: 5px 9px;
  border-radius: var(--pm-radius-sm);
  font-size: 11.5px;
}

.pm-verified svg { flex: none; }

/* Property reference pill, used over card imagery */
.pm-ref {
  background: rgba(27, 42, 74, 0.9);
  color: var(--pm-white);
  padding: 4px 9px;
  border-radius: var(--pm-radius-sm);
  font-family: var(--pm-font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Listing card + card grid — shared by Home and Buy
   -------------------------------------------------------------------------- */

.pm-cardgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.pm-card {
  display: block;
  background: var(--pm-white);
  border: 1px solid var(--pm-border-soft);
  border-radius: var(--pm-radius-sm);
  overflow: hidden;
  color: inherit;
  box-shadow: var(--pm-shadow-card);
}

.pm-card:hover,
.pm-card:focus-visible {
  color: inherit;
  border-color: var(--pm-action);
}

.pm-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--pm-stripe-cool);
  display: flex;
  align-items: flex-end;
  padding: 12px;
}

.pm-card__media--alt { background: var(--pm-stripe-green); }

.pm-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-card__verified {
  position: absolute;
  top: 12px;
  left: 12px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.pm-card__ref {
  position: absolute;
  top: 12px;
  right: 12px;
  border-radius: 3px;
}

.pm-card__tag {
  position: relative;
  margin-left: auto;
  background: var(--pm-surface-deep);
  border: 1px solid #D3DCEA;
  color: var(--pm-navy);
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}

.pm-card__body { padding: 16px 18px 18px; }

.pm-card__pricerow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.pm-card__price {
  font-family: var(--pm-font-ui);
  font-weight: 700;
  font-size: 20px;
  color: var(--pm-navy);
}

.pm-card__yield {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pm-green);
  background: var(--pm-surface-green);
  border: 1px solid var(--pm-border-green);
  padding: 3px 8px;
  border-radius: var(--pm-radius-sm);
  white-space: nowrap;
}

.pm-card__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--pm-text);
  margin-top: 5px;
}

.pm-card__size {
  font-size: 13px;
  color: var(--pm-muted-cool);
  margin-top: 2px;
}

.pm-card__fact {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--pm-hairline);
  font-size: 12.5px;
  color: var(--pm-muted-cool);
  line-height: 1.35;
}

.pm-card__fact svg {
  flex: none;
  margin-top: 1px;
}

@media (min-width: 768px) {
  .pm-cardgrid { gap: 22px; }
  .pm-cardgrid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .pm-cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.pm-breadcrumb {
  background: var(--pm-surface-alt);
  border-bottom: 1px solid var(--pm-border);
}

.pm-breadcrumb__inner {
  padding-block: 11px;
  font-family: var(--pm-font-ui);
  font-size: 12.5px;
  color: var(--pm-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-breadcrumb a { color: var(--pm-muted); }

.pm-breadcrumb a:hover,
.pm-breadcrumb a:focus-visible { color: var(--pm-navy); }

.pm-breadcrumb__sep {
  color: var(--pm-border-crumb);
  margin-inline: 6px;
}

.pm-breadcrumb__current { color: var(--pm-text); }

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

.pm-footer {
  background: var(--pm-navy);
  color: var(--pm-on-navy-soft);
  border-top: 1px solid var(--pm-gold);
}

.pm-footer__inner { padding-block: var(--pm-space-7) var(--pm-space-5); }

.pm-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--pm-space-6) var(--pm-space-5);
}

.pm-footer__heading {
  color: var(--pm-on-navy);
  font-family: var(--pm-font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pm-footer__links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
}

.pm-footer__links a { color: var(--pm-on-navy-soft); }

.pm-footer__links a:hover,
.pm-footer__links a:focus-visible { color: var(--pm-on-navy); }

/* Social band — large circular brand marks, mirroring the reference layout:
   heading beside the icons on desktop, stacked and centred on mobile. */

.pm-connect {
  margin-top: var(--pm-space-6);
  padding-top: var(--pm-space-5);
  border-top: 1px solid var(--pm-on-navy-rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pm-space-4);
}

.pm-connect__heading {
  font-family: var(--pm-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  color: var(--pm-on-navy);
  margin: 0;
}

.pm-connect__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.pm-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* A lifted navy so the circles read as solid on the navy footer, rather
     than the near-invisible result of navy-on-navy. */
  background: #2C3E63;
  color: var(--pm-on-navy);
  flex: none;
}

.pm-social:hover,
.pm-social:focus-visible {
  background: var(--pm-white);
  color: var(--pm-navy);
}

/* The same disc on a light band — the Home closing strip. */
.pm-social--onlight {
  background: var(--pm-navy);
  color: var(--pm-white);
}

.pm-social--onlight:hover,
.pm-social--onlight:focus-visible {
  background: var(--pm-action);
  color: var(--pm-action-text);
}

/* A network with no brand mark keeps its label instead of vanishing. */
.pm-social--text {
  width: auto;
  border-radius: var(--pm-pill);
  padding: 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.pm-footer__legal {
  margin-top: var(--pm-space-5);
  padding-top: var(--pm-space-5);
  border-top: 1px solid var(--pm-on-navy-rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  color: var(--pm-on-navy-muted);
}

.pm-footer__legal a { color: var(--pm-on-navy-muted); }

.pm-footer__legal a:hover,
.pm-footer__legal a:focus-visible { color: var(--pm-on-navy); }

.pm-footer__legal-links {
  display: flex;
  gap: var(--pm-space-4);
}

.pm-footer__colophon {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--pm-on-navy-faint);
}

/* --------------------------------------------------------------------------
   Footer alignment
   Mobile-first per LESSON-009: centred is the BASE, because below 768px the
   four columns collapse to one and a left-aligned stack reads as ragged.
   Left alignment is the progressive enhancement at 768px, not an override.
   -------------------------------------------------------------------------- */

.pm-footer__inner { text-align: center; }

.pm-footer__links { align-items: center; }

.pm-footer__legal,
.pm-footer__colophon {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pm-footer__legal-links { justify-content: center; }

@media (min-width: 768px) {
  .pm-footer__inner { text-align: left; }

  .pm-footer__links { align-items: flex-start; }

  .pm-footer__legal,
  .pm-footer__colophon {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .pm-footer__legal-links { justify-content: flex-start; }

  /* Heading and icons share a row from here up, as in the reference. */
  .pm-connect {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--pm-space-6);
  }

  .pm-connect__list { justify-content: flex-start; }
}

/* Gold is permitted here — the build stamp. */
.pm-footer__build {
  color: var(--pm-gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10.5px;
}

/* --------------------------------------------------------------------------
   Contact furniture
   --------------------------------------------------------------------------
   One component at every width. Below 900px it spans the foot of the screen as
   three flush columns; from 900px it detaches into a centred floating card.

   The three actions have three different weights on purpose:

     1 Book a Consultation  brand primary — cyan fill, navy label, identical to
                            the header CTA. The one thing being asked for.
     2 Call                 quietest — white, hairline border, navy throughout
     3 WhatsApp             the channel's identity — white, hairline border,
                            navy label, and the WhatsApp mark in green

   The mark is --pm-green, our verification green, by client instruction: one
   green in the palette rather than two that nearly match.

   Mobile-first per LESSON-009: the flush bar is the base, the floating card is
   the wide-screen enhancement.
   -------------------------------------------------------------------------- */

/*
 * 76px, not 68: the first label wraps to two lines below ~380px ("Book a free
 * consultation" is long), which takes the bar from 63px to 69px. Nothing is
 * covered at 68px today because the footer's own padding absorbs it, but a
 * spacer shorter than the bar it is reserving for is a latent bug the next
 * copy change would expose.
 */
.pm-actionbar-spacer { height: 76px; }

.pm-actionbar {
  position: fixed;
  z-index: 50;
  inset: auto 0 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--pm-white);
  border-top: 1px solid var(--pm-border);
  box-shadow: var(--pm-shadow-bar);
  /* Clears the home indicator on notched phones without a fixed guess. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pm-actionbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 62px;
  padding: 9px 6px;
  background: var(--pm-white);
  color: var(--pm-navy);
  text-align: center;
}

.pm-actionbar__item + .pm-actionbar__item { border-left: 1px solid var(--pm-hairline); }

.pm-actionbar__item svg { flex: none; }

.pm-actionbar__label {
  font-family: var(--pm-font-ui);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  /* Labels are client-editable, so a long one wraps rather than setting the
     grid track's min-content width and pushing the page sideways — the same
     failure .pm-btn was fixed for. */
  overflow-wrap: anywhere;
}

/* ---- 1 · Book a Consultation — the brand primary ------------------------- */

.pm-actionbar__item--primary {
  background: var(--pm-action);
  color: var(--pm-action-text);
  border-left-color: var(--pm-action);
}

.pm-actionbar__item--primary:hover,
.pm-actionbar__item--primary:focus-visible {
  background: var(--pm-action-hover);
  color: var(--pm-action-text);
}

/* ---- 2 · Call — the quietest ---------------------------------------------- */

.pm-actionbar__item--call:hover,
.pm-actionbar__item--call:focus-visible {
  background: var(--pm-white);
  color: var(--pm-navy);
  box-shadow: inset 0 0 0 1px var(--pm-navy);
}

/* ---- 3 · WhatsApp — the channel's own identity ---------------------------- */

.pm-actionbar__item--whatsapp svg { color: var(--pm-green); }

.pm-actionbar__item--whatsapp:hover,
.pm-actionbar__item--whatsapp:focus-visible {
  background: var(--pm-whatsapp-wash);
  color: var(--pm-navy);
  box-shadow: inset 0 0 0 1px var(--pm-whatsapp-edge);
}

/* ---- From 900px the bar becomes a floating card --------------------------- */

@media (min-width: 900px) {
  /*
   * Three full-width thirds would be an enormous target on a desktop screen,
   * and a band across the foot of every page is a lot of furniture — so the
   * bar detaches: centred, sized to its own contents, clear of the edge.
   *
   * width:max-content with left:0/right:0 and margin-inline:auto is what
   * centres a fixed element against its own width.
   */
  .pm-actionbar {
    inset: auto 0 22px 0;
    width: max-content;
    max-width: calc(100% - 2 * var(--pm-gutter));
    margin-inline: auto;
    display: flex;
    gap: 8px;
    padding: 9px;
    background: var(--pm-white);
    border: 1px solid var(--pm-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(27, 42, 74, 0.22);
  }

  .pm-actionbar__item {
    flex-direction: row;
    gap: 9px;
    min-height: 0;
    padding: 12px 22px;
    border-radius: 10px;
  }

  /* The separators were there to divide flush thirds; the group is spaced. */
  .pm-actionbar__item + .pm-actionbar__item { border-left: 0; }

  /* Each alternative carries its own hairline once they are separate objects. */
  .pm-actionbar__item--call,
  .pm-actionbar__item--whatsapp { border: 1px solid var(--pm-border); }

  .pm-actionbar__item--call:hover,
  .pm-actionbar__item--call:focus-visible {
    border-color: var(--pm-navy);
    box-shadow: none;
  }

  .pm-actionbar__item--whatsapp:hover,
  .pm-actionbar__item--whatsapp:focus-visible {
    border-color: var(--pm-whatsapp-edge);
    box-shadow: none;
  }

  .pm-actionbar__label {
    font-size: 14px;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  /* Card height plus the gap it floats above the viewport edge. */
  .pm-actionbar-spacer { height: 96px; }
}

/* --------------------------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------------------------
   Restrained: a short rise and a fade, nothing else. No parallax, no scale,
   no scroll-linked transforms.

   Three separate guarantees that content is never left invisible:
     1. the hidden state is scoped to html.js, so with scripting off nothing
        is ever hidden in the first place;
     2. assets/js/reveal.js sets html.js in the <head>, before first paint, so
        there is no flash of visible-then-hidden;
     3. under prefers-reduced-motion the hidden state is overridden outright
        and the observer never runs.
   -------------------------------------------------------------------------- */

.js .pm-reveal {
  opacity: 0;
  transform: translateY(18px);
}

.js .pm-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--pm-reveal-delay, 0ms),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--pm-reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .pm-reveal {
    opacity: 1;
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   Desktop contact furniture (correction pass 2026-08-06)
   From 1024 the three-action bar does NOT render — the header CTA and the
   corner WhatsApp pill are the desktop contact surface. This regressed once
   when the bar went everywhere; qa-header.js now holds it permanently.
   -------------------------------------------------------------------------- */

.pm-wapill {
  display: none;
}

@media (min-width: 1024px) {
  .pm-actionbar,
  .pm-actionbar-spacer { display: none; }

  .pm-wapill {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--pm-white);
    color: var(--pm-navy);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-pill);
    padding: 13px 20px;
    font: var(--pm-button-sm);
    box-shadow: var(--pm-shadow-float);
    text-decoration: none;
  }

  .pm-wapill svg { color: var(--pm-green); }

  .pm-wapill:hover,
  .pm-wapill:focus-visible {
    background: var(--pm-whatsapp-wash);
    border-color: var(--pm-whatsapp-edge);
    color: var(--pm-navy);
  }
}