/* lib/client/base.css */
/* ---------------------------------------------------------------------------
   Shared foundation ONLY.

   This file is deliberately tiny and carries no opinion about how a site looks:
   no colours, no type scale, no spacing scale, no components. Those belong to
   each site's own stylesheet, because the whole point of this showcase is that
   the three sites are art-directed separately rather than skinned from one
   template. What lives here is the handful of things that must behave
   identically everywhere for correctness or accessibility reasons.
--------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  /* Nothing may push the page sideways. Horizontal overflow is a hard fail in
     the acceptance criteria, so it is prevented structurally rather than
     hunted section by section. */
  overflow-x: clip;
}

img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Focus is never removed — only replaced with something that suits the site.
   Each stylesheet restyles :focus-visible; this is the floor. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: #111;
  color: #fff;
  text-decoration: none;
  font: 600 0.875rem/1 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  border-radius: 2px;
  transition: top 120ms ease;
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- hero media -----------------------------------------------------------
   The poster is the finished state. The video, when it exists and is allowed
   to play, fades in over the top of it. The two are stacked in a fixed-aspect
   frame so nothing reflows when the film arrives.
-------------------------------------------------------------------------- */
.hero-media { position: relative; }
.hero-media__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-media__poster,
.hero-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media__video {
  opacity: 0;
  transition: opacity 700ms ease;
}
.hero-media[data-video-state="playing"] .hero-media__video { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-media__video { transition: none; }
}

/* --- reveal ---------------------------------------------------------------
   Opt-in: an element only animates if it carries data-reveal AND the runtime
   marked the document as animation-capable. With JS off, or reduced motion on,
   content is simply visible — never stuck at opacity 0, which is the classic
   way scroll animation breaks a page.
-------------------------------------------------------------------------- */
html[data-motion="on"] [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift, 18px), 0);
  transition:
    opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
/* Stagger without inline styles.
   A `style="--reveal-delay:120ms"` attribute is an inline style, and the CSP
   here is style-src 'self' with no unsafe-inline — so the delay is expressed
   positionally instead. Containers opt in with data-stagger. */
[data-stagger] > *:nth-child(1)  { --reveal-delay: 0ms; }
[data-stagger] > *:nth-child(2)  { --reveal-delay: 70ms; }
[data-stagger] > *:nth-child(3)  { --reveal-delay: 140ms; }
[data-stagger] > *:nth-child(4)  { --reveal-delay: 200ms; }
[data-stagger] > *:nth-child(5)  { --reveal-delay: 255ms; }
[data-stagger] > *:nth-child(6)  { --reveal-delay: 300ms; }
[data-stagger] > *:nth-child(n+7) { --reveal-delay: 340ms; }

html[data-motion="on"] [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- framed photograph ----------------------------------------------------
   Structural only, and here for the same reason .hero-media is: it holds an
   aspect box so the page cannot reflow when the bytes land, and it carries the
   focal point. Every frame in the image bank is 612px on its long edge, so a
   photograph is never allowed to become a full-bleed background — the sites
   size these frames so they stay at or near 1:1 on a desktop. Colour, border,
   radius and caption styling all belong to each site's own stylesheet.

   The focus classes exist because `style="object-position:50% 20%"` is an
   inline style and the CSP is style-src 'self' with no unsafe-inline.
-------------------------------------------------------------------------- */
.pic {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--pic-placeholder, rgba(0, 0, 0, 0.06));
}
.pic__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.pic--21x9 { aspect-ratio: 21 / 9; }
.pic--16x9 { aspect-ratio: 16 / 9; }
.pic--3x2  { aspect-ratio: 3 / 2; }
.pic--4x3  { aspect-ratio: 4 / 3; }
.pic--1x1  { aspect-ratio: 1 / 1; }
.pic--3x4  { aspect-ratio: 3 / 4; }
.pic--4x5  { aspect-ratio: 4 / 5; }

.pic--f-top    .pic__img { object-position: 50% 0%; }
.pic--f-upper  .pic__img { object-position: 50% 28%; }
.pic--f-centre .pic__img { object-position: 50% 50%; }
.pic--f-lower  .pic__img { object-position: 50% 72%; }
.pic--f-bottom .pic__img { object-position: 50% 100%; }
.pic--f-left   .pic__img { object-position: 0% 50%; }
.pic--f-right  .pic__img { object-position: 100% 50%; }

/* A caption is prose about the picture, not a claim about who built it. */
.picf { display: block; }

/* ===========================================================================
   MEDIA PRIMITIVES  (lib/mediakit.mjs)

   Structure only — aspect, stacking, scroll behaviour, motion rules. Colour,
   border, radius and type belong to each site's own stylesheet, which is why
   these carry no palette.

   Every variant is a class because the CSP is style-src 'self' with no
   unsafe-inline: an inline style="--speed:40s" would be blocked.
   =========================================================================== */

/* --- media frame: poster now, video later, no reflow either way ---------- */
.mf {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--mf-placeholder, rgba(0, 0, 0, 0.08));
}
.mf__poster,
.mf__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mf__poster { object-position: 50% 50%; }
.mf__video { opacity: 0; transition: opacity 600ms ease; }
.mf[data-video-state="playing"] .mf__video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mf__video { transition: none; } }

.mf--21x9 { aspect-ratio: 21 / 9; }
.mf--16x9 { aspect-ratio: 16 / 9; }
.mf--3x2  { aspect-ratio: 3 / 2; }
.mf--4x3  { aspect-ratio: 4 / 3; }
.mf--1x1  { aspect-ratio: 1 / 1; }
.mf--3x4  { aspect-ratio: 3 / 4; }
.mf--4x5  { aspect-ratio: 4 / 5; }

.mf--f-top    .mf__poster { object-position: 50% 0%; }
.mf--f-upper  .mf__poster { object-position: 50% 28%; }
.mf--f-centre .mf__poster { object-position: 50% 50%; }
.mf--f-lower  .mf__poster { object-position: 50% 72%; }
.mf--f-bottom .mf__poster { object-position: 50% 100%; }
.mf--f-left   .mf__poster { object-position: 0% 50%; }
.mf--f-right  .mf__poster { object-position: 100% 50%; }

/* --- hero ---------------------------------------------------------------- */
.heroM--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--heroM-gap, clamp(1.75rem, 3vw, 3rem));
  align-items: center;
}
.heroM__media { display: grid; gap: var(--heroM-gap, 1rem); min-width: 0; }
.heroM__mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--heroM-gap, 1rem); }

.heroM--overlay { position: relative; isolation: isolate; }
.heroM--overlay .heroM__scrim { position: absolute; inset: 0; z-index: 1; }
.heroM__over { position: relative; z-index: 2; }

@media (max-width: 62rem) {
  .heroM--split { grid-template-columns: minmax(0, 1fr); }
  .heroM__mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- video card ---------------------------------------------------------- */
.vcard { margin: 0; display: grid; gap: 0.7rem; min-width: 0; }
.vcard__cap { display: grid; gap: 0.15rem; }

/* --- marquee rail --------------------------------------------------------
   The track is rendered twice and translated by exactly -50%, which is what
   makes the loop seamless. Pausing is animation-play-state, so the rail holds
   its position rather than snapping back to the start.
-------------------------------------------------------------------------- */
.mq { position: relative; display: flex; align-items: center; gap: 0.75rem; overflow: hidden; }
.mq__viewport { flex: 1; min-width: 0; display: flex; overflow: hidden; }
.mq__viewport:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mq__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  animation: mq-shift var(--mq-speed, 46s) linear infinite;
  will-change: transform;
}
.mq--slow .mq__track { --mq-speed: 68s; }
.mq--mid  .mq__track { --mq-speed: 46s; }
.mq--fast .mq__track { --mq-speed: 30s; }
.mq--right .mq__track { animation-direction: reverse; }
.mq__item { display: flex; align-items: center; white-space: nowrap; }
.mq__sep { font-style: normal; opacity: 0.45; padding-inline: 0.85em; }

@keyframes mq-shift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }

.mq[data-paused] .mq__track,
.mq[data-hover] .mq__track,
.mq[data-offscreen] .mq__track { animation-play-state: paused; }

.mq__pause {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0.55;
  transition: opacity 180ms ease;
}
.mq__pause:hover, .mq__pause:focus-visible { opacity: 1; }
.mq__icon { width: 0.5rem; height: 0.65rem; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.mq__pause[aria-pressed="true"] .mq__icon {
  border: 0;
  width: 0; height: 0;
  border-left: 0.6rem solid currentColor;
  border-top: 0.38rem solid transparent;
  border-bottom: 0.38rem solid transparent;
}

/* Reduced motion: never animate. The rail becomes an ordinary scrollable list
   and the duplicate track is removed so nothing is read or scrolled twice. */
@media (prefers-reduced-motion: reduce) {
  .mq__track { animation: none; }
  .mq__viewport { overflow-x: auto; scrollbar-width: thin; }
  .mq__track[aria-hidden="true"] { display: none; }
  .mq__pause { display: none; }
}
.mq[data-motion="off"] .mq__track { animation: none; }
.mq[data-motion="off"] .mq__viewport { overflow-x: auto; }
.mq[data-motion="off"] .mq__track[aria-hidden="true"] { display: none; }

/* --- media carousel ------------------------------------------------------- */
.car { display: grid; gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.car__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.car__ctrl { display: flex; gap: 0.5rem; flex: none; }
.car__ctrl--under { justify-content: flex-end; }
.car__btn {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.95rem;
  transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}
.car__btn:disabled { opacity: 0.28; cursor: default; }
.car[data-static] .car__ctrl { display: none; }

.car__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--car-cell, 22rem);
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  overscroll-behavior-x: contain;
  padding-bottom: 0.25rem;
  /* The scrollbar is the site's business, not this file's; hide the ugly
     default and rely on the buttons, which are always present. */
  scrollbar-width: none;
}
.car__rail::-webkit-scrollbar { display: none; }
.car__rail:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.car__cell { scroll-snap-align: start; min-width: 0; }
.car--sm .car__rail { --car-cell: 15rem; }
.car--md .car__rail { --car-cell: 22rem; }
.car--lg .car__rail { --car-cell: 28rem; }

@media (max-width: 48rem) {
  .car--md .car__rail { --car-cell: 76vw; }
  .car--lg .car__rail { --car-cell: 84vw; }
  .car--sm .car__rail { --car-cell: 58vw; }
}

/* --- scroll-controlled hero ------------------------------------------------
   DEFAULT STATE IS STATIC. The tall sticky geometry only exists while
   [data-scrub] is present, which the runtime adds after it has decoded a real
   frame. No JS, reduced motion, save-data, a missing file or a decode error
   therefore all render a normal one-viewport hero rather than several blank
   screens of scrolling.
-------------------------------------------------------------------------- */
.shero { position: relative; }
/* The STATIC state is already a full, overlaid hero of about one viewport —
   not a stacked image-then-text column. An earlier version let the two stack,
   which pushed the headline and the call to action below the fold for anyone
   without the film. Only the height and the stickiness change when the runtime
   arms; the composition does not. */
.shero__stick {
  position: relative;
  display: grid;
  min-height: min(86vh, 46rem);
  overflow: hidden;
}
.shero__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--mf-placeholder, #111);
}
.shero__poster,
.shero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.shero__video { opacity: 0; transition: opacity 320ms ease; }
.shero[data-ready] .shero__video { opacity: 1; }
/* The poster stays underneath for the whole life of the hero. It is never
   removed, so a decode failure mid-scroll reveals a finished image, not black. */
.shero__scrim { position: absolute; inset: 0; pointer-events: none; }
.shero__over { position: relative; z-index: 2; align-self: end; width: 100%; }
.shero__hint { display: none; }

.shero[data-scrub] { height: 100vh; }
.shero--len2[data-scrub] { height: 200vh; }
.shero--len3[data-scrub] { height: 300vh; }
.shero--len4[data-scrub] { height: 400vh; }
.shero[data-scrub] .shero__stick {
  position: sticky; top: 0;
  height: 100vh;
  min-height: 0;
}
.shero[data-scrub] .shero__hint {
  display: flex; align-items: center; gap: 0.75rem;
  position: absolute; left: 50%; bottom: 1.5rem; z-index: 3;
  transform: translateX(-50%);
}
.shero__bar { display: block; width: 8rem; height: 2px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.shero__bar i { display: block; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: left center; }
.shero__hintt { font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  /* Belt and braces: the runtime already refuses to arm, but if anything ever
     set the attribute, the geometry must still collapse to one viewport. */
  .shero[data-scrub] { height: auto; }
  .shero[data-scrub] .shero__stick { position: relative; height: auto; min-height: min(86vh, 46rem); }
  .shero__video { transition: none; }
}

/* --- loop hero ------------------------------------------------------------ */
.lhero { position: relative; isolation: isolate; }
.lhero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lhero__over { position: relative; z-index: 2; }

/* sites/paramount-heating-cooling/styles.css */
/* ===========================================================================
   Elite review kit — STRUCTURE ONLY (no palette, no type).
   Prepended to each Elite site's stylesheet by sites/elite-common/sync.sh.
   =========================================================================== */

/* cover frame */
.xf { display: block; position: relative; overflow: hidden; width: 100%; height: 100%; }
.xf__img { width: 100%; height: 100%; object-fit: cover; }

/* review-mode label */
.xreview { display: inline-flex; align-items: center; gap: .55em; margin: 0; }
.xreview__dot { width: .5em; height: .5em; border-radius: 50%; flex: none; background: currentColor; }

/* hero film slot */
.xhero__media { position: absolute; inset: 0; z-index: auto; } /* no stacking context: the pause control (z 4) must sit above the scrim (z 1) */
.xhero__media .hero-media__frame { height: 100%; }
.xhero__pp { position: absolute; z-index: 4; display: grid; place-items: center; }
.xhero__pp[hidden] { display: none; }
.xhero__ppi { width: .55rem; height: .7rem; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.xhero__pp[aria-pressed="true"] .xhero__ppi { width: 0; height: 0; border: 0; border-left: .62rem solid currentColor; border-top: .4rem solid transparent; border-bottom: .4rem solid transparent; }
.xreview--film { position: absolute; z-index: 3; }

/* branded van — scroll-driven arrival of a static transparent render.
   --van-p: 0 (entering) → 1 (settled); --van-s: sheen travel 0 → 1. */
.xvan { position: relative; margin: 0; --van-p: 1; --van-s: .5; }
.xvan__scene { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: end center; padding-inline: 4%; }
.xvan__light, .xvan__horizon { position: absolute; pointer-events: none; z-index: 0; }
.xvan__light { inset: 0; }
.xvan__horizon { left: 0; right: 0; height: 1px; }
.xvan__car {
  position: relative; z-index: 1; width: min(100%, 62rem);
  transform: translate3d(calc((1 - var(--van-p)) * 22%), 0, 0) scale(calc(.94 + var(--van-p) * .06));
  opacity: calc(.25 + var(--van-p) * .75);
  will-change: transform;
}
.xvan__pic, .xvan__img { display: block; width: 100%; height: auto; }
.xvan__img { position: relative; z-index: 1; }
.xvan__shadow { position: absolute; left: 6%; right: 4%; bottom: 1.5%; height: 9%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, .18) 60%, rgba(0, 0, 0, 0));
  filter: blur(6px); transform: scaleX(calc(.82 + var(--van-p) * .18)); opacity: calc(.4 + var(--van-p) * .6); }
.xvan__sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-image: var(--van-mask); mask-image: var(--van-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  background: linear-gradient(104deg, transparent 0 38%, rgba(255, 246, 228, .0) 40%, rgba(255, 246, 228, .26) 47%, rgba(255, 246, 228, .05) 52%, transparent 56%) no-repeat;
  background-size: 260% 100%; background-position: calc(110% - var(--van-s) * 120%) 0; }
.xvan__reflect { position: absolute; left: 0; right: 0; top: 100%; height: 34%; z-index: 0; pointer-events: none; opacity: .14;
  background: var(--van-mask) no-repeat center bottom / 100% auto; transform: scaleY(-1); transform-origin: top;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 70%); mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 70%); }
.xvan[data-van-settled] { --van-p: 1; --van-s: .55; }
@media (prefers-reduced-motion: reduce) { .xvan { --van-p: 1 !important; } .xvan__car { transform: none; opacity: 1; } .xvan__sheen { display: none; } }

/* comparison */
.xcmp__tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.xcmp__pair[hidden] { display: none; }
.xcmp__stage { position: relative; overflow: hidden; aspect-ratio: 16 / 10; --pos: 50%; touch-action: pan-y; user-select: none; }
.xcmp__layer { position: absolute; inset: 0; }
.xcmp__img { width: 100%; height: 100%; object-fit: cover; }
.xcmp__layer--a { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.xcmp__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; transform: translateX(-1px); pointer-events: none; z-index: 2; }
.xcmp__knob { position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); border-radius: 50%; }
.xcmp__knob::before, .xcmp__knob::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-top: .32rem solid transparent; border-bottom: .32rem solid transparent; transform: translateY(-50%); }
.xcmp__knob::before { left: .7rem; border-right: .4rem solid currentColor; }
.xcmp__knob::after { right: .7rem; border-left: .4rem solid currentColor; }
.xcmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.xcmp__range:focus-visible ~ .xcmp__handle .xcmp__knob,
.xcmp__stage:has(.xcmp__range:focus-visible) .xcmp__knob { outline: 2px solid currentColor; outline-offset: 3px; }
.xcmp__tag { position: absolute; top: .9rem; z-index: 1; }
.xcmp__tag--a { left: .9rem; }
.xcmp__tag--b { right: .9rem; }

/* trust rail */
.xrail { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.xrail__rail { cursor: grab; min-width: 0; }
.xrail__rail[data-dragging] { cursor: grabbing; scroll-snap-type: none; }
.xrail__rail[data-dragging] * { pointer-events: none; }
.xrail__cell { display: grid; align-content: start; gap: .6rem; }

/* gallery + lightbox */
.xgal__grid { display: grid; }
.xgal__open { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; text-align: left; }
.xgal__img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.2,.7,.2,1); }
.xgal__open:hover .xgal__img, .xgal__open:focus-visible .xgal__img { transform: scale(1.04); }
.xgal__cap { position: absolute; left: 0; right: 0; bottom: 0; }
@media (prefers-reduced-motion: reduce) { .xgal__img { transition: none; } .xgal__open:hover .xgal__img { transform: none; } }
.xlb { border: 0; padding: 0; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; background: transparent; }
.xlb::backdrop { background: rgba(8, 8, 8, .9); }
.xlb__inner { position: relative; height: 100%; display: grid; grid-template-rows: 1fr auto auto; place-items: center; gap: .8rem; padding: 3.5rem 1rem 1.25rem; }
.xlb__img { max-width: min(92vw, 1500px); max-height: 100%; width: auto; height: auto; object-fit: contain; min-height: 0; }
.xlb__nav { display: flex; align-items: center; gap: 1.25rem; }
.xlb__btn, .xlb__close { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; }
.xlb__close { position: absolute; top: .75rem; right: .75rem; font-size: 1.5rem; }
html[data-lightbox-open] { overflow: hidden; }

/* faq */
.xfaq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.xfaq__q::-webkit-details-marker { display: none; }
.xfaq__i { position: relative; width: .9rem; height: .9rem; flex: none; }
.xfaq__i::before, .xfaq__i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transform: translateY(-50%); transition: transform 240ms ease; }
.xfaq__i::after { transform: translateY(-50%) rotate(90deg); }
details[open] .xfaq__i::after { transform: translateY(-50%) rotate(0deg); }
.xfaq__a { display: grid; gap: .8rem; }

/* form */
.xform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
/* Field errors sit in the row gap (absolutely positioned) so showing or clearing
   one never moves the controls below it — a layout shift between mousedown and
   mouseup otherwise turns a click on the next control into a miss. */
.xform__f { position: relative; display: grid; gap: .35rem; min-width: 0; }
.xform__f > .xform__err { position: absolute; left: 0; right: 0; top: calc(100% + .2rem); margin: 0; line-height: 1.2; }
.xform__f--wide { grid-column: 1 / -1; }
.xform input:not([type="checkbox"]), .xform select, .xform textarea { width: 100%; font: inherit; min-width: 0; }
.xform__consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin-top: 1rem; }
.xform__consent input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; }
.xform__err:empty { display: none; }
.xform__done[hidden] { display: none; }
@media (max-width: 34rem) { .xform__grid { grid-template-columns: minmax(0, 1fr); } }

/* toast */
.xtoast { position: fixed; left: 50%; bottom: 1.25rem; z-index: 200; pointer-events: none; transform: translate(-50%, 160%); transition: transform 300ms ease; max-width: calc(100vw - 2rem); }
.xtoast[data-show] { transform: translate(-50%, 0); }
.xtoast:empty { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .xtoast { transition: none; } }
/* ===========================================================================
   Elite review kit — inner-page templates (xp-*).
   Styled entirely through brand tokens each site maps in its own :root:
     --x-ink --x-ink-2 --x-paper --x-stone --x-stone-2 --x-accent --x-accent-deep
     --x-accent-soft --x-text --x-muted --x-line --x-line-light --x-light
     --x-display --x-label --x-sans --x-radius --x-shadow --x-ease --x-head-offset
   Appended after kit.css and before the site's own stylesheet by sync.sh.
   =========================================================================== */

.xp-sec { padding-block: clamp(3.25rem, 6.5vw, 5.75rem); }
.xp-sec--paper { background: var(--x-paper); }
.xp-sec--stone { background: var(--x-stone); }
.xp-sec--ink { background: var(--x-ink); color: var(--x-light); }

.xp-kicker { font: 600 .68rem/1.4 var(--x-label); letter-spacing: .24em; text-transform: uppercase; color: var(--x-accent-deep); margin: 0 0 .9rem; }
.xp-kicker--light { color: var(--x-accent-soft); }
.xp-h1 { font: 400 clamp(2.3rem, 5.2vw, 4.3rem)/1.02 var(--x-display); letter-spacing: -.015em; color: var(--x-light); text-wrap: balance; max-width: 22ch; }
.xp-h2 { font: 400 clamp(1.85rem, 3.3vw, 2.85rem)/1.07 var(--x-display); letter-spacing: -.01em; color: var(--x-ink); text-wrap: balance; }
.xp-h2--light { color: var(--x-light); }
.xp-lead { margin-top: 1.1rem; font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6; color: color-mix(in srgb, var(--x-light) 82%, transparent); max-width: 38rem; }
.xp-body { color: var(--x-muted); max-width: 40rem; margin-top: 1rem; }
.xp-body--lg { font-size: clamp(1rem, 1.2vw, 1.075rem); line-height: 1.75; color: var(--x-text); }
.xp-body--light { color: color-mix(in srgb, var(--x-light) 72%, transparent); }
.xp-note { font-size: .82rem; color: var(--x-muted); max-width: 46rem; margin-top: .6rem; }
.xp-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.6rem); }
.xp-textlink { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem; padding-top: .55rem; font: 600 .7rem/1 var(--x-label); letter-spacing: .2em; text-transform: uppercase; color: var(--x-ink); text-decoration: none; padding-bottom: .35rem; border-bottom: 1px solid var(--x-accent); }
.xp-textlink span[aria-hidden] { transition: transform 220ms var(--x-ease); }
.xp-textlink:hover span[aria-hidden] { transform: translateX(4px); }

/* page hero */
.xp-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--x-ink); color: var(--x-light); min-height: clamp(26rem, 64svh, 38rem); display: grid; align-items: end; }
.xp-hero--compact { min-height: clamp(20rem, 46svh, 28rem); }
.xp-hero__media { position: absolute; inset: 0; z-index: -2; }
.xp-hero__media .xf { height: 100%; }
.xp-hero__glyph { display: grid !important; place-items: center; background: radial-gradient(70% 90% at 75% 40%, var(--x-ink-2), var(--x-ink)); color: var(--x-accent); }
.xp-hero__glyph svg { width: min(36vw, 22rem); height: auto; margin-left: 38%; opacity: .55; }
.xp-hero__scrim { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, color-mix(in srgb, var(--x-ink) 92%, transparent) 0%, color-mix(in srgb, var(--x-ink) 70%, transparent) 42%, color-mix(in srgb, var(--x-ink) 15%, transparent) 100%),
  linear-gradient(0deg, color-mix(in srgb, var(--x-ink) 70%, transparent), transparent 55%); }
.xp-hero__in { padding-block: calc(var(--x-head-offset, 0px) + clamp(2.5rem, 6vh, 4rem)) clamp(2.25rem, 5vh, 3.5rem); }
.xp-hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.xp-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin-bottom: 1.6rem; font: 500 .74rem/1.3 var(--x-sans); color: color-mix(in srgb, var(--x-light) 70%, transparent); }
.xp-crumbs li { display: inline-flex; align-items: center; gap: .6rem; }
.xp-crumbs li + li::before { content: ""; width: .32rem; height: .32rem; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: .6; }
.xp-crumbs a { display: inline-block; padding: .45rem 0; color: inherit; text-decoration: none; }
.xp-crumbs a:hover { color: var(--x-accent-soft); text-decoration: underline; text-underline-offset: 3px; }
.xp-crumbs [aria-current] { color: var(--x-light); }

/* intro + aside */
.xp-intro__in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.xp-signs { background: var(--x-stone); border-top: 2px solid var(--x-accent); padding: clamp(1.5rem, 2.6vw, 2.1rem); border-radius: var(--x-radius); position: sticky; top: calc(var(--x-head-offset, 0px) + 5.5rem); }
.xp-sec--stone .xp-signs { background: var(--x-paper); }
.xp-signs__t { font: 400 1.4rem/1.2 var(--x-display); color: var(--x-ink); margin-bottom: 1rem; }
.xp-signs ul { display: grid; gap: .7rem; }
.xp-signs li { position: relative; padding-left: 1.3rem; font-size: .93rem; line-height: 1.55; color: var(--x-text); }
.xp-signs li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; border: 1px solid var(--x-accent-deep); transform: rotate(45deg); }
.xp-signs__links a { color: var(--x-ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--x-accent) 60%, transparent); }
.xp-signs__links a:hover { color: var(--x-accent-deep); }
.xp-signs__cta { width: 100%; margin-top: 1.5rem; }
.xp-signs .xreview { margin-top: 1rem; }

/* numbered steps */
.xp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--x-line); border: 1px solid var(--x-line); }
@media (min-width: 62.01rem) { .xp-steps:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xp-step { background: var(--x-paper); padding: clamp(1.4rem, 2.4vw, 2rem); display: grid; align-content: start; gap: .6rem; }
.xp-sec--stone .xp-step { background: var(--x-paper); }
.xp-step__n { font: 400 2rem/1 var(--x-display); color: var(--x-accent); }
.xp-step__t { font: 400 1.22rem/1.2 var(--x-display); color: var(--x-ink); }
.xp-step__b { font-size: .9rem; line-height: 1.6; color: var(--x-muted); }
.xp-steps--light { background: var(--x-line-light); border-color: var(--x-line-light); }
.xp-steps--light .xp-step { background: var(--x-ink-2); }
.xp-steps--light .xp-step__t { color: var(--x-light); }
.xp-steps--light .xp-step__b { color: color-mix(in srgb, var(--x-light) 68%, transparent); }

/* options / homes split */
.xp-options__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.xp-options__pic { transform: translateY(var(--par, 0)); }
.xp-options__frame { aspect-ratio: 4 / 5; box-shadow: var(--x-shadow); border-radius: var(--x-radius); max-height: 40rem; }
.xp-media--glyph { display: grid; place-items: center; background: radial-gradient(80% 80% at 50% 35%, var(--x-ink-2), var(--x-ink)); color: var(--x-accent); }
.xp-media--glyph svg { width: 46%; height: auto; }
.xp-consider { display: grid; gap: 1.2rem; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--x-line); }
.xp-consider__t { font: 400 1.12rem/1.25 var(--x-display); color: var(--x-ink); }
.xp-consider__b { font-size: .9rem; color: var(--x-muted); margin-top: .3rem; }

/* cards */
.xp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); gap: clamp(.9rem, 1.6vw, 1.4rem); }
.xp-card__link { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; color: inherit; background: var(--x-paper); border: 1px solid var(--x-line); border-radius: var(--x-radius); overflow: hidden; transition: transform 320ms var(--x-ease), box-shadow 320ms var(--x-ease), border-color 320ms ease; }
.xp-sec--paper .xp-card__link { background: #fff; }
.xp-card__link:hover, .xp-card__link:focus-visible { transform: translateY(-4px); box-shadow: var(--x-shadow); border-color: color-mix(in srgb, var(--x-accent) 55%, transparent); }
.xp-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.xp-card__media .xf__img { transition: transform 900ms var(--x-ease); }
.xp-card__link:hover .xf__img { transform: scale(1.05); }
.xp-card__body { display: grid; align-content: start; gap: .55rem; padding: 1.35rem 1.35rem 1.5rem; }
.xp-card__ico { width: 2rem; height: 2rem; color: var(--x-accent-deep); }
.xp-card__ico svg { width: 100%; height: 100%; }
.xp-card__t { font: 400 1.32rem/1.15 var(--x-display); color: var(--x-ink); }
.xp-card__b { font-size: .9rem; line-height: 1.55; color: var(--x-muted); }
.xp-card__go { margin-top: .5rem; font: 600 .68rem/1 var(--x-label); letter-spacing: .2em; text-transform: uppercase; color: var(--x-accent-deep); display: inline-flex; gap: .5rem; }

/* faq */
.xp-faq__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.xp-faq__head { position: sticky; top: calc(var(--x-head-offset, 0px) + 5.5rem); }
.xp-sec .xfaq { border-top: 1px solid var(--x-line); }
.xp-sec .xfaq__item { border-bottom: 1px solid var(--x-line); }
.xp-sec .xfaq__q { padding: 1.25rem 0; min-height: 3rem; font: 400 clamp(1.06rem, 1.4vw, 1.24rem)/1.32 var(--x-display); color: var(--x-ink); }
.xp-sec .xfaq__q:hover { color: var(--x-accent-deep); }
.xp-sec .xfaq__i { color: var(--x-accent-deep); }
.xp-sec .xfaq__a { padding: 0 2rem 1.4rem 0; color: var(--x-muted); }

/* area links */
.xp-arealinks__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1px; background: var(--x-line-light); border: 1px solid var(--x-line-light); }
.xp-arealink { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: .35rem 1rem; align-items: center; height: 100%; padding: 1.35rem 1.4rem; background: var(--x-ink); color: var(--x-light); text-decoration: none; transition: background-color 260ms ease; }
.xp-arealink:hover, .xp-arealink:focus-visible { background: var(--x-ink-2); }
.xp-arealink__t { font: 400 1.35rem/1.15 var(--x-display); }
.xp-arealink__k { grid-row: 2; font: 600 .62rem/1.3 var(--x-label); letter-spacing: .2em; text-transform: uppercase; color: var(--x-accent-soft); }
.xp-arealink > span[aria-hidden] { grid-row: 1 / 3; grid-column: 2; color: var(--x-accent); transition: transform 220ms var(--x-ease); }
.xp-arealink:hover > span[aria-hidden] { transform: translateX(4px); }
.xp-arealink--all .xp-arealink__t { color: var(--x-accent-soft); font-style: italic; }

/* request */
.xp-request__in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.xp-facts { display: grid; gap: .9rem; margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--x-line); }
.xp-facts li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: baseline; }
.xp-facts__k { font: 600 .64rem/1 var(--x-label); letter-spacing: .22em; text-transform: uppercase; color: var(--x-accent-deep); }
.xp-facts__v { color: var(--x-text); font-size: .93rem; }
.xp-pending { border-bottom: 1px dashed var(--x-accent); cursor: help; justify-self: start; }
.xp-request__form { background: #fff; padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: var(--x-shadow); border-top: 2px solid var(--x-accent); border-radius: var(--x-radius); }

/* cta band */
.xp-band { background: var(--x-ink); color: var(--x-light); padding-block: clamp(3rem, 6vw, 4.75rem); position: relative; overflow: hidden; }
.xp-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 90% 0%, color-mix(in srgb, var(--x-accent) 18%, transparent), transparent 60%); pointer-events: none; }
.xp-band__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 2rem; align-items: center; }
.xp-band__ctas { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }

/* city pages */
.xp-focus__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.xp-focus__cta { margin-top: 1.8rem; }
.xp-focus__points { display: grid; gap: 1px; background: var(--x-line-light); border: 1px solid var(--x-line-light); }
.xp-focus__points li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: baseline; padding: 1.25rem 1.35rem; background: var(--x-ink-2); color: color-mix(in srgb, var(--x-light) 86%, transparent); font-size: .96rem; line-height: 1.5; }
.xp-focus__points .xp-step__n { font-size: 1.5rem; }
.xp-alsolist { margin-top: 1.6rem; font-size: .92rem; color: var(--x-muted); }
.xp-alsolist a { color: var(--x-ink); text-decoration-color: var(--x-accent); text-underline-offset: 3px; }
.xp-verify { padding-block: 2rem; border-top: 1px dashed var(--x-accent); }
.xp-verify__list { margin-top: .8rem; display: grid; gap: .4rem; padding-left: 1.2rem; list-style: disc; font-size: .84rem; color: var(--x-muted); }

/* areas index */
.xp-citycards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.4rem); }
.xp-citycard__link { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; color: var(--x-light); text-decoration: none; border-radius: var(--x-radius); background: var(--x-ink); }
.xp-citycard__media { position: absolute; inset: 0; }
.xp-citycard__media .xf__img { transition: transform 1000ms var(--x-ease); }
.xp-citycard__link:hover .xf__img { transform: scale(1.05); }
.xp-citycard__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--x-ink) 92%, transparent) 0%, color-mix(in srgb, var(--x-ink) 35%, transparent) 55%, transparent 100%); }
.xp-citycard__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: .45rem; padding: 1.5rem; }
.xp-citycard__k { font: 600 .62rem/1.3 var(--x-label); letter-spacing: .22em; text-transform: uppercase; color: var(--x-accent-soft); }
.xp-citycard__t { font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1.05 var(--x-display); }
.xp-citycard__b { font-size: .9rem; color: color-mix(in srgb, var(--x-light) 78%, transparent); }
.xp-citycard .xp-card__go { color: var(--x-accent-soft); }
.xp-secondary__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.4rem 2rem; }
.xp-secondary__list li { padding-top: 1rem; border-top: 1px solid var(--x-line); }
.xp-secondary__t { font: 400 1.2rem/1.2 var(--x-display); color: var(--x-ink); }
.xp-secondary__b { font-size: .86rem; color: var(--x-muted); margin-top: .35rem; }
.xp-secondary__note { margin-top: 1.6rem; }

/* about */
.xp-team__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.xp-team__pics { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: repeat(2, clamp(9rem, 15vw, 13rem)); gap: .6rem; }
.xp-team__pic { position: relative; overflow: hidden; border-radius: var(--x-radius); }
.xp-team__pic--0 { grid-row: span 2; }
.xp-team__tag, .xp-tag { position: absolute; left: .6rem; bottom: .6rem; padding: .35rem .55rem; font: 600 .56rem/1 var(--x-label); letter-spacing: .16em; text-transform: uppercase; background: color-mix(in srgb, var(--x-ink) 75%, transparent); color: var(--x-light); }
.xp-identity__in { max-width: 48rem; }

/* gallery page */
.xp-galpage__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 1.6rem; }
.xp-galpage .xgal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(11rem, 17vw, 15rem); grid-auto-flow: dense; gap: .6rem; }
.xp-galpage .xgal__item--wide { grid-column: span 2; }
.xp-galpage .xgal__item--tall { grid-row: span 2; }

/* faq page */
.xp-faqpage__in { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.xp-faqpage__toc { position: sticky; top: calc(var(--x-head-offset, 0px) + 5.5rem); }
.xp-faqpage__toc ul { display: grid; gap: .1rem; border-left: 1px solid var(--x-line); }
.xp-faqpage__toc a { display: block; padding: .45rem 0 .45rem 1rem; font-size: .9rem; color: var(--x-text); text-decoration: none; margin-left: -1px; border-left: 1px solid transparent; }
.xp-faqpage__toc a:hover { color: var(--x-accent-deep); border-left-color: var(--x-accent); }
.xp-faqpage__groups { display: grid; gap: clamp(2.25rem, 4vw, 3.25rem); }
.xp-faqgroup { scroll-margin-top: calc(var(--x-head-offset, 0px) + 5.5rem); }
.xp-faqgroup__t { font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--x-display); color: var(--x-ink); margin-bottom: .8rem; }

/* 404 */
.xp-404 { min-height: 70svh; display: grid; align-items: center; padding-top: calc(var(--x-head-offset, 0px) + 4rem); }
.xp-404__links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.xp-404__links a { display: inline-flex; min-height: 2.75rem; align-items: center; padding: 0 1.2rem; border: 1px solid var(--x-line-light); color: var(--x-light); text-decoration: none; border-radius: var(--x-radius); }
.xp-404__links a:hover { border-color: var(--x-accent); color: var(--x-accent-soft); }

/* responsive */
@media (max-width: 62rem) {
  .xp-intro__in, .xp-options__in, .xp-faq__in, .xp-request__in, .xp-focus__in, .xp-team__in, .xp-faqpage__in { grid-template-columns: minmax(0, 1fr); }
  .xp-signs, .xp-faq__head, .xp-faqpage__toc { position: static; }
  .xp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-options__frame { aspect-ratio: 16 / 10; }
  .xp-homes .xp-options__pic { order: -1; }
  .xp-citycards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-band__in { grid-template-columns: minmax(0, 1fr); }
  .xp-band__ctas { justify-content: flex-start; }
  .xp-galpage .xgal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xp-faqpage__toc ul { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; }
  .xp-faqpage__toc a { border: 1px solid var(--x-line); padding: .5rem .8rem; margin: 0; border-radius: 999px; font-size: .82rem; }
}
@media (max-width: 40rem) {
  .xp-sec { padding-block: clamp(2.75rem, 11vw, 3.5rem); }
  .xp-hero { min-height: clamp(27rem, 78svh, 34rem); }
  .xp-hero--compact { min-height: 22rem; }
  .xp-hero__scrim { background: linear-gradient(0deg, color-mix(in srgb, var(--x-ink) 95%, transparent) 0%, color-mix(in srgb, var(--x-ink) 72%, transparent) 55%, color-mix(in srgb, var(--x-ink) 30%, transparent) 100%); }
  .xp-hero__ctas > * { flex: 1 1 100%; }
  .xp-steps { grid-template-columns: minmax(0, 1fr); }
  .xp-citycards { grid-template-columns: minmax(0, 1fr); }
  .xp-citycard__link { aspect-ratio: 16 / 11; }
  .xp-team__pics { grid-template-rows: repeat(2, 8.5rem); }
  .xp-facts li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .xp-galpage .xgal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 10rem; }
  .xp-galpage .xgal__item--wide { grid-column: span 2; }
  .xp-band__ctas > * { flex: 1 1 100%; }
  .xp-sec .xfaq__a { padding-right: 0; }
}

/* touch targets: every standalone control ≥ 24px (WCAG 2.5.8), primary ≥ 44px */
.xform__consent input { width: 1.5rem !important; height: 1.5rem !important; margin-top: 0 !important; }
.pp-foot__brand, .pm-foot__brand, .pp-head__brand, .pm-head__brand { display: inline-block; padding-block: .3rem; }
.xp-alsolist a, .pp-areas__more a { display: inline-block; padding-block: .3rem; }
/* keep anchored sections and keyboard focus clear of the sticky/fixed header (WCAG 2.4.11) */
html { scroll-padding-top: 5.5rem; }
/* ===========================================================================
   PARAMOUNT HEATING & COOLING — architectural modern.
   Slate and navy, warm interior light, bronze trim. Didone display, geometric
   technical sans for labels and numerals. Staggered, asymmetric rhythm.
   =========================================================================== */
:root {
  --night: #0E141C;
  --slate: #121A24;
  --slate-2: #1A2531;
  --slate-3: #24303E;
  --navy: #17253A;
  --bone: #F3F1EC;
  --bone-2: #E8E4DC;
  --white: #FCFBF8;
  --bronze: #C49A62;
  --bronze-deep: #9A7340;
  --bronze-soft: #E0C49A;
  --cool: #9DB4CC;
  --warm: #C49A62;
  --text: #1E2631;
  --muted: #5F6875;
  --line: rgba(18, 26, 36, .13);
  --line-light: rgba(243, 241, 236, .14);
  --display: Didot, "Bodoni 72", "Bodoni MT", "Playfair Display", "Times New Roman", Georgia, serif;
  --tech: Futura, "Futura PT", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif;
  --sans: "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  --wrap: 80rem;
  --gut: clamp(1.15rem, 4vw, 3rem);
  --shadow: 0 34px 70px -34px rgba(8, 12, 18, .55), 0 12px 24px -16px rgba(8, 12, 18, .3);
  --ease: cubic-bezier(.22, .68, .16, 1);
  /* shared inner-page tokens */
  --x-ink: var(--slate); --x-ink-2: var(--slate-2); --x-paper: var(--white); --x-stone: var(--bone); --x-stone-2: var(--bone-2);
  --x-accent: var(--bronze); --x-accent-deep: var(--bronze-deep); --x-accent-soft: var(--bronze-soft);
  --x-text: var(--text); --x-muted: var(--muted); --x-line: var(--line); --x-line-light: var(--line-light); --x-light: var(--bone);
  --x-display: var(--display); --x-label: var(--tech); --x-sans: var(--sans); --x-radius: 2px; --x-shadow: var(--shadow); --x-ease: var(--ease);
  --x-head-offset: 4.5rem;
}

body.pm { background: var(--white); color: var(--text); font: 400 1rem/1.62 var(--sans); -webkit-font-smoothing: antialiased; }
.pm ::selection { background: var(--bronze-soft); color: var(--slate); }
.pm :focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.pm-wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }

.pm-h2 { font: 400 clamp(2.05rem, 3.7vw, 3.3rem)/1.04 var(--display); letter-spacing: -.005em; color: var(--slate); }
.pm-h2--light { color: var(--bone); }
.pm-label { font: 500 .68rem/1.4 var(--tech); letter-spacing: .28em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 1rem; }
.pm-label--light { color: var(--bronze-soft); }
.pm-body { color: var(--muted); max-width: 34rem; margin-top: 1.1rem; }
.pm-body--light { color: rgba(243, 241, 236, .7); }

.pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 3.1rem; padding: 0 1.5rem; border-radius: 2px; font: 500 .72rem/1 var(--tech); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; transition: background-color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms ease; }
.pm-btn--bronze { background: var(--bronze); color: var(--night); }
.pm-btn--bronze:hover { background: var(--bronze-soft); transform: translateY(-1px); box-shadow: 0 14px 26px -16px rgba(196, 154, 98, .9); }
.pm-btn--glass { color: var(--bone); border-color: rgba(243, 241, 236, .35); background: rgba(14, 20, 28, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pm-btn--glass:hover { border-color: var(--bone); background: rgba(14, 20, 28, .5); }
.pm-btn--sm { min-height: 2.75rem; padding: 0 1.15rem; margin-top: 1.7rem; }
.pm-btn--dark { background: var(--slate); color: var(--bone); }
.pm-btn--dark:hover { background: var(--navy); transform: translateY(-1px); }
.pm-textlink { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem; padding-top: .55rem; font: 500 .7rem/1 var(--tech); letter-spacing: .2em; text-transform: uppercase; color: var(--slate); text-decoration: none; padding-bottom: .35rem; border-bottom: 1px solid var(--bronze); }
.pm-textlink--light, .pm-about .pm-textlink, .pm-work .pm-textlink { color: var(--bone); }
.pm-textlink span[aria-hidden] { transition: transform 220ms var(--ease); }
.pm-textlink:hover span[aria-hidden] { transform: translateX(4px); }
.pm .xp-call { cursor: help; }
.pm .xp-tag, .pm .xp-team__tag { font-family: var(--tech); }
.pm-btn span[aria-hidden] { transition: transform 240ms var(--ease); }
.pm-btn:hover span[aria-hidden] { transform: translateX(3px); }

.pm .xreview { font: 500 .64rem/1.35 var(--tech); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-deep); margin-top: 1.4rem; }
.pm .xreview__dot { background: var(--bronze); box-shadow: 0 0 0 3px rgba(196, 154, 98, .25); }

.pm-lock { display: inline-flex; align-items: center; gap: .75rem; color: var(--bone); }
.pm-mark { width: 2.7rem; height: auto; color: currentColor; }
.pm-word { width: 9.4rem; height: auto; overflow: visible; }
.pm-word__name { font: 400 21px/1 var(--display); fill: currentColor; letter-spacing: .12em; }
.pm-word__sub { font: 500 7.4px/1 var(--tech); fill: currentColor; letter-spacing: .34em; opacity: .75; }
.pm-word__tag { font: 500 6.5px/1 var(--tech); fill: var(--bronze); letter-spacing: .3em; }

/* ── header ─────────────────────────────────────────────────────────────── */
.pm-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--bone); transition: background-color 320ms ease, box-shadow 320ms ease; }
.pm-head[data-scrolled], html[data-nav-open] .pm-head { background: rgba(14, 20, 28, .9); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--line-light); }
.pm-head__in { display: flex; align-items: center; gap: 2rem; min-height: 5rem; transition: min-height 300ms ease; }
.pm-head[data-scrolled] .pm-head__in { min-height: 4.1rem; }
.pm-head__brand { text-decoration: none; flex: none; }
.pm-head__nav { margin-inline: auto; }
.pm-head__nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); }
.pm-head__link { position: relative; font: 500 .74rem/1 var(--tech); letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 241, 236, .82); text-decoration: none; padding: .6rem 0; transition: color 200ms ease; }
.pm-head__link::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--bronze); transform: translateX(-50%) scale(0); transition: transform 260ms var(--ease); }
.pm-head__link:hover, .pm-head__link[aria-current] { color: var(--bone); }
.pm-head__link:hover::after, .pm-head__link[aria-current]::after { transform: translateX(-50%) scale(1); }
.pm-head__cta { display: flex; align-items: center; gap: 1.25rem; }
.pm-head__call { font: 500 .74rem/1.2 var(--tech); letter-spacing: .08em; color: rgba(243, 241, 236, .7); border-bottom: 1px dashed var(--bronze); cursor: help; }
.pm-head__cta .pm-btn--sm { margin: 0; }
.pm-head__toggle { display: none; width: 2.75rem; height: 2.75rem; margin-left: auto; place-items: center; }
.pm-burger, .pm-burger::before, .pm-burger::after { display: block; width: 1.4rem; height: 1.5px; background: var(--bone); transition: transform 240ms ease; }
.pm-burger { position: relative; }
.pm-burger::before, .pm-burger::after { content: ""; position: absolute; left: 0; }
.pm-burger::before { top: -6px; } .pm-burger::after { top: 6px; }
.pm-head__toggle[aria-expanded="true"] .pm-burger { background: transparent; }
.pm-head__toggle[aria-expanded="true"] .pm-burger::before { transform: translateY(6px) rotate(45deg); }
.pm-head__toggle[aria-expanded="true"] .pm-burger::after { transform: translateY(-6px) rotate(-45deg); }
.pm-drawer { display: none; }
.pm-menu { position: relative; display: flex; align-items: center; gap: .1rem; }
.pm-menu__btn { width: 1.5rem; height: 2rem; display: grid; place-items: center; color: rgba(243, 241, 236, .7); }
.pm-menu__chev { width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms ease; }
.pm-menu[data-open] .pm-menu__chev { transform: translateY(1px) rotate(-135deg); }
.pm-menu__panel { position: absolute; top: calc(100% + 1.1rem); left: -1.4rem; min-width: 20rem; padding: 1rem 1.4rem 1.2rem; background: rgba(14, 20, 28, .96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line-light); border-top: 2px solid var(--bronze); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 200ms ease, transform 200ms var(--ease), visibility 0s 200ms; }
.pm-menu[data-open] .pm-menu__panel, .pm-menu:hover .pm-menu__panel { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 200ms var(--ease); }
.pm-menu__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -1.3rem; height: 1.3rem; }
.pm-menu__panel li a { display: block; padding: .6rem 0; font: 400 1.02rem/1.25 var(--display); color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--line-light); }
.pm-menu__panel li a:hover { color: var(--bronze-soft); }
.pm-menu__all { display: inline-flex; gap: .5rem; margin-top: .9rem; font: 500 .64rem/1 var(--tech); letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-soft); text-decoration: none; }
@media (max-width: 80rem) { .pm-head__call { display: none; } .pm-head__nav ul { gap: 1.25rem; } }
@media (max-width: 66rem) {
  .pm-head__nav, .pm-head__cta { display: none; }
  .pm-head__toggle { display: grid; }
  .pm-drawer { display: grid; align-content: start; gap: 1.5rem; padding: .5rem var(--gut) calc(1.5rem + env(safe-area-inset-bottom)); max-height: calc(100dvh - 4.1rem); overflow-y: auto; overscroll-behavior: contain; }
  .pm-drawer:not([data-open]) { display: none; }
  .pm-drawer__main { display: grid; }
  .pm-drawer__link { display: block; padding: .85rem 0; font: 400 1.5rem/1.1 var(--display); color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--line-light); }
  .pm-drawer__link[aria-current] { color: var(--bronze-soft); }
  .pm-drawer__sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; padding: .4rem 0 .8rem; border-bottom: 1px solid var(--line-light); }
  .pm-drawer__sub a { display: block; padding: .55rem 0; font-size: .88rem; color: rgba(243, 241, 236, .7); text-decoration: none; }
  .pm-drawer__ctas { display: grid; gap: .7rem; }
  .pm-drawer__ctas > * { width: 100%; }
  html[data-nav-open] { overflow: hidden; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.pm-hero { position: relative; isolation: isolate; min-height: min(100svh, 58rem); display: grid; align-items: end; color: var(--bone); background: var(--night); overflow: hidden; }
.pm-hero .hero-media__poster, .pm-hero .hero-media__video { object-position: 50% 50%; }
.pm-hero .xreview--film { display: none; }
.pm-hero__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(100deg, rgba(14, 20, 28, .92) 0%, rgba(14, 20, 28, .66) 38%, rgba(14, 20, 28, .12) 70%),
  linear-gradient(0deg, rgba(14, 20, 28, .85) 0%, rgba(14, 20, 28, 0) 42%),
  linear-gradient(180deg, rgba(14, 20, 28, .55) 0%, rgba(14, 20, 28, 0) 22%); }
.pm-hero__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: end; padding-block: 7rem clamp(1.5rem, 4vh, 2.5rem); }
.pm-hero__h { font: 400 clamp(2.6rem, 5.2vw, 4.6rem)/1 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.pm-hero__h span { display: block; }
.pm-hero__h em { display: block; font-style: italic; color: var(--bronze-soft); }
.pm-hero__lead { margin-top: 1.5rem; max-width: 32rem; font-size: clamp(1rem, 1.25vw, 1.1rem); color: rgba(243, 241, 236, .78); }
.pm-hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.pm-hero__window { align-self: center; justify-self: end; width: min(100%, 25rem); aspect-ratio: 16 / 10; display: grid; place-content: center; justify-items: center; gap: .4rem; text-align: center; padding: 1.5rem; border: 1px solid rgba(243, 241, 236, .28); background: rgba(14, 20, 28, .28); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: var(--shadow); }
.pm-hero__play { width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 1px solid rgba(243, 241, 236, .7); position: relative; margin-bottom: .6rem; }
.pm-hero__play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: .8rem solid var(--bone); border-top: .5rem solid transparent; border-bottom: .5rem solid transparent; }
.pm-hero__wt { font: 500 .74rem/1 var(--tech); letter-spacing: .26em; text-transform: uppercase; }
.pm-hero__ws { font-size: .78rem; color: rgba(243, 241, 236, .65); max-width: 16rem; }
.pm-hero__points { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-light); }
.pm-hero__points div { padding: 1.1rem 1.4rem 0; border-left: 1px solid var(--line-light); }
.pm-hero__points div:first-child { padding-left: 0; border-left: 0; }
.pm-hero__points dt { font: 500 .64rem/1 var(--tech); letter-spacing: .26em; text-transform: uppercase; color: var(--bronze-soft); }
.pm-hero__points dd { margin: .45rem 0 0; font: 400 1.15rem/1.25 var(--display); }
.pm-hero .xhero__pp { right: var(--gut); top: 6rem; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid rgba(243, 241, 236, .55); color: var(--bone); background: rgba(14, 20, 28, .35); }

/* ── arrival / van: architectural studio ───────────────────────────────── */
.pm-arrive { position: relative; background: linear-gradient(180deg, var(--bone) 0%, #E9E6DF 60%, #DCDDDB 100%); padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem); overflow: hidden; }
.pm-arrive__grid { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(18, 26, 36, .05) 1px, transparent 1px) 0 0 / 6rem 6rem; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.pm-arrive__top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 5rem); align-items: end; }
.pm-arrive__top .pm-body { margin: 0; }
.pm-arrive__stage { position: relative; margin-top: clamp(.5rem, 2vw, 1.5rem); }
.pm-van .xvan__scene { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.pm-van .xvan__light { background: radial-gradient(46% 60% at 50% 55%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%), radial-gradient(28% 40% at 25% 30%, rgba(157, 180, 204, .25), transparent 70%), radial-gradient(28% 40% at 78% 28%, rgba(224, 196, 154, .28), transparent 70%); }
.pm-van .xvan__horizon { bottom: 18%; background: linear-gradient(90deg, transparent, rgba(18, 26, 36, .25) 20%, rgba(18, 26, 36, .25) 80%, transparent); }
.pm-van .xvan__car { width: min(92%, 60rem); }
.pm-arrive__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pm-arrive__list li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .5rem; padding: 1.2rem 1.2rem 1.3rem; background: rgba(252, 251, 248, .78); border-top: 2px solid var(--bronze); }
.pm-arrive__k { font: 500 .78rem/1.6 var(--tech); letter-spacing: .14em; color: var(--bronze-deep); }
.pm-arrive__t { font: 500 .78rem/1.3 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.pm-arrive__b { font-size: .86rem; color: var(--muted); margin-top: .25rem; }
.pm-arrive__note { margin-top: 1rem; }

/* ── trust ──────────────────────────────────────────────────────────────── */
.pm-trust { background: var(--slate); color: var(--bone); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.pm-trust__in { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.pm-trust .xrail__head { justify-content: flex-end; }
.pm-trust .car__btn { color: var(--bone); border-color: rgba(243, 241, 236, .35); }
.pm-trust .car__btn:hover:not(:disabled) { background: var(--bronze); border-color: var(--bronze); color: var(--night); }
.pm-trust .car__rail { --car-cell: 17rem; }
.pm-trust .xrail__cell { background: var(--slate-2); border-top: 2px solid var(--bronze); padding: 1.6rem 1.4rem; min-height: 14rem; transition: transform 300ms var(--ease), background-color 300ms ease; }
.pm-trust .xrail__cell:hover { transform: translateY(-4px); background: var(--slate-3); }
.pm-trust .xrail__k { font: 500 .62rem/1 var(--tech); letter-spacing: .26em; text-transform: uppercase; color: var(--bronze-soft); }
.pm-trust .xrail__t { font: 400 1.35rem/1.2 var(--display); }
.pm-trust .xrail__b { font-size: .85rem; color: rgba(243, 241, 236, .62); }
.pm-trust .xrail__cell--pending { background: transparent; border: 1px dashed rgba(157, 180, 204, .4); border-top: 2px solid var(--cool); }
.pm-trust .xrail__cell--pending .xrail__k { color: var(--cool); }

/* ── comparison ─────────────────────────────────────────────────────────── */
.pm-compare { background: var(--white); padding-block: clamp(3.5rem, 7vw, 5.75rem); }
.pm-compare__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.9fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.pm .xcmp__tabs { margin-bottom: 1rem; }
.pm .xcmp__tab { padding: .6rem 1rem; font: 500 .68rem/1 var(--tech); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; transition: color 200ms ease, border-color 200ms ease; }
.pm .xcmp__tab[aria-selected="true"] { color: var(--slate); border-bottom-color: var(--bronze); }
.pm .xcmp__stage { aspect-ratio: 16 / 10.5; background: var(--bone-2); box-shadow: var(--shadow); }
.pm .xcmp__handle { background: var(--bone); }
.pm .xcmp__knob { background: var(--slate); color: var(--bone); border: 1px solid rgba(243, 241, 236, .6); width: 3.2rem; height: 3.2rem; }
.pm .xcmp__tab { min-height: 2.75rem; }
.pm .xcmp__tag { top: auto; bottom: .9rem; padding: .45rem .7rem; font: 500 .6rem/1 var(--tech); letter-spacing: .2em; text-transform: uppercase; background: rgba(14, 20, 28, .78); color: var(--bone); }
.pm .xcmp__cap { margin-top: .9rem; font-size: .9rem; color: var(--text); }
.pm .xcmp__note { margin-top: .5rem; font-size: .76rem; color: var(--muted); }
.pm-compare__panel { background: var(--slate); color: var(--bone); padding: 1.5rem 1.4rem; margin-top: 1.8rem; border-radius: 2px; }
.pm-compare__panel .pm-label { margin-bottom: .9rem; }
.pm-compare__panel ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.pm-compare__panel li { display: flex; gap: .7rem; align-items: center; font-size: .88rem; }
.pm-tick { width: 1.15rem; height: 1.15rem; flex: none; border: 1px solid var(--bronze); border-radius: 50%; position: relative; }
.pm-tick::after { content: ""; position: absolute; left: .34rem; top: .2rem; width: .3rem; height: .52rem; border: solid var(--bronze); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* ── services ───────────────────────────────────────────────────────────── */
.pm-services { background: var(--bone); padding-block: clamp(3.5rem, 7vw, 5.75rem); }
.pm-services__in { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 2.25fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.pm-services__intro { position: sticky; top: 6.5rem; }
.pm-svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pm-svc__card:nth-child(4n + 2), .pm-svc__card:nth-child(4n + 4) { translate: 0 1.75rem; }
.pm-svc__link { display: grid; text-decoration: none; color: inherit; background: var(--white); box-shadow: 0 1px 0 var(--line); transition: transform 320ms var(--ease), box-shadow 320ms var(--ease); }
.pm-svc__link:hover, .pm-svc__link:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow); }
.pm-svc__pic { display: block; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--slate); }
.pm-svc__pic .xf__img { transition: transform 900ms var(--ease); }
.pm-svc__link:hover .xf__img { transform: scale(1.05); }
.pm-svc__card--drawn .pm-svc__pic { display: grid; place-items: center; background: radial-gradient(90% 90% at 50% 30%, var(--slate-3), var(--slate)); color: var(--bronze-soft); }
.pm-glyph { width: 46%; height: auto; }
.pm-svc__bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .95rem 1rem .2rem; }
.pm-svc__t { font: 500 .74rem/1.3 var(--tech); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.pm-chev { width: .5rem; height: .8rem; color: var(--bronze-deep); flex: none; transition: transform 240ms var(--ease); }
.pm-svc__link:hover .pm-chev { transform: translateX(3px); }
.pm-svc__b { padding: 0 1rem 1.1rem; font-size: .82rem; color: var(--muted); }

/* ── about / process ────────────────────────────────────────────────────── */
.pm-about { position: relative; background: var(--navy); color: var(--bone); padding-block: clamp(3.75rem, 7.5vw, 6rem); overflow: hidden; }
.pm-about::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(243, 241, 236, .045) 1px, transparent 1px) 0 0 / 5rem 5rem,
  radial-gradient(60% 70% at 90% 0%, rgba(196, 154, 98, .16), transparent 60%); pointer-events: none; }
.pm-about__head { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 5rem); align-items: end; }
.pm-about__head .pm-body { margin: 0; }
.pm-about__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.pm-step { padding: 1.8rem 1.5rem 2rem; background: rgba(14, 20, 28, .4); border: 1px solid var(--line-light); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: border-color 300ms ease, transform 300ms var(--ease); }
.pm-step:hover { border-color: rgba(196, 154, 98, .55); transform: translateY(-4px); }
.pm-step--1 { margin-top: 1.75rem; } .pm-step--2 { margin-top: 3.5rem; } .pm-step--3 { margin-top: 5.25rem; }
.pm-step__n { font: 400 2.8rem/1 var(--display); color: var(--bronze); }
.pm-step__k { margin-top: 1.3rem; font: 500 .64rem/1 var(--tech); letter-spacing: .28em; text-transform: uppercase; color: var(--cool); }
.pm-step__t { margin-top: .6rem; font: 400 1.45rem/1.15 var(--display); }
.pm-step__b { margin-top: .7rem; font-size: .88rem; color: rgba(243, 241, 236, .66); }

/* ── gallery strip ──────────────────────────────────────────────────────── */
.pm-work { background: var(--slate); color: var(--bone); padding-block: clamp(3.5rem, 7vw, 5.5rem); overflow: hidden; }
.pm-work .pm-h2 { color: var(--bone); }
.pm-work .pm-label { color: var(--bronze-soft); }
.pm-work .pm-body { color: rgba(243, 241, 236, .62); font-size: .88rem; }
.pm-work__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem; align-items: end; margin-bottom: 2rem; }
.pm-work__head .pm-textlink { margin-top: .9rem; }
.pm .xp-galpage .xgal__grid { grid-auto-flow: dense; overflow: visible; padding: 0; scroll-snap-type: none; }
.pm .xp-galpage .xgal__item, .pm .xp-galpage .xgal__item:nth-child(even) { aspect-ratio: auto; margin-top: 0; }
.pm .xgal__grid { grid-auto-flow: column; grid-auto-columns: clamp(15rem, 27vw, 24rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gut) 1.25rem max(var(--gut), calc((100vw - var(--wrap)) / 2)); scrollbar-width: thin; scrollbar-color: var(--bronze) transparent; }
.pm .xgal__item { scroll-snap-align: start; aspect-ratio: 4 / 5; }
.pm .xgal__item:nth-child(even) { margin-top: 2.5rem; aspect-ratio: 4 / 4.6; }
.pm .xgal__open { background: var(--slate-2); }
.pm .xgal__cap { padding: 2.5rem 1rem 1rem; font: 500 .66rem/1.3 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: var(--bone); background: linear-gradient(0deg, rgba(14, 20, 28, .85), rgba(14, 20, 28, 0)); }
.pm .xlb__cap { color: var(--bone); font: 500 .72rem/1.3 var(--tech); letter-spacing: .18em; text-transform: uppercase; }
.pm .xlb__count { color: var(--bronze-soft); font: 500 .72rem/1 var(--tech); letter-spacing: .2em; }
.pm .xlb__btn, .pm .xlb__close { color: var(--bone); border: 1px solid rgba(243, 241, 236, .35); }
.pm .xlb__btn:hover, .pm .xlb__close:hover { background: var(--bronze); color: var(--night); border-color: var(--bronze); }

/* ── team ───────────────────────────────────────────────────────────────── */
.pm-team { background: var(--white); padding-block: clamp(3.5rem, 7vw, 5.75rem); }
.pm-team__in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.7fr); gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: center; }
.pm-team__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.pm-team__pic { position: relative; aspect-ratio: 3 / 4; overflow: hidden; box-shadow: var(--shadow); }
.pm-team__pic--1 { translate: 0 1.75rem; }
.pm-team__slot { position: absolute; left: .6rem; bottom: .6rem; padding: .3rem .5rem; font: 500 .56rem/1 var(--tech); letter-spacing: .2em; text-transform: uppercase; color: var(--bone); background: rgba(14, 20, 28, .7); }
.pm-team__q { margin: 1.6rem 0 0; padding-left: 1.1rem; border-left: 2px solid var(--bronze); }
.pm-team__q p { font: italic 400 clamp(1.2rem, 1.6vw, 1.45rem)/1.3 var(--display); color: var(--slate); }
.pm-team__q footer { margin-top: 1rem; font: 500 .64rem/1 var(--tech); letter-spacing: .24em; text-transform: uppercase; color: var(--bronze-deep); }
.pm-team__pending { grid-column: 1 / -1; padding-top: 1rem; }
.pm-team__pending .xreview { margin: 0; }

/* ── service areas ──────────────────────────────────────────────────────── */
.pm-areas { position: relative; background: var(--night); color: var(--bone); padding-block: clamp(3.75rem, 7.5vw, 6rem); overflow: hidden; }
.pm-areas__rings { position: absolute; right: -18vw; top: 50%; width: 70vw; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(157, 180, 204, .09) 0 1px, transparent 1px 4.5rem); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.pm-areas__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); }
.pm-areas__h { font-family: var(--tech); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.12; }
.pm-areas__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.pm-area { display: grid; gap: .5rem; height: 100%; padding: 1.3rem 1.2rem 1.4rem; border: 1px solid var(--line-light); background: linear-gradient(160deg, rgba(36, 48, 62, .7), rgba(14, 20, 28, .4)); color: var(--bone); text-decoration: none; transition: border-color 260ms ease, transform 260ms var(--ease); }
.pm-area:hover, .pm-area:focus-visible { border-color: var(--bronze); transform: translateY(-3px); }

.pm-area__k { font-size: .78rem; color: rgba(243, 241, 236, .58); margin-top: .5rem; }
.pm-area__n { margin-bottom: .6rem; }
.pm-area__n { font: 500 .66rem/1 var(--tech); letter-spacing: .2em; color: var(--bronze); }
.pm-area__t { font: 400 clamp(1.25rem, 1.8vw, 1.6rem)/1.1 var(--display); }
.pm-areas__more { grid-column: 2; }
.pm-areas__more ul { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.pm-areas__more li { font-size: .88rem; color: rgba(243, 241, 236, .72); }
.pm-areas__more li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: .55rem; border-radius: 50%; background: var(--cool); vertical-align: middle; }
.pm-areas__pending { grid-column: 1 / -1; }
.pm-areas .xreview { color: var(--bronze-soft); margin: 0; }

/* ── faq ────────────────────────────────────────────────────────────────── */
.pm-faq { background: var(--bone); padding-block: clamp(3.5rem, 7vw, 5.75rem); }
.pm-faq__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pm-faq__head { position: sticky; top: 6.5rem; }
.pm .xfaq { display: grid; gap: .6rem; }
.pm .xfaq__item { background: var(--white); border-left: 2px solid transparent; transition: border-color 240ms ease; }
.pm .xfaq__item[open] { border-left-color: var(--bronze); }
.pm .xfaq__q { padding: 1.25rem 1.4rem; font: 400 clamp(1.05rem, 1.4vw, 1.22rem)/1.3 var(--display); color: var(--slate); }
.pm .xfaq__i { color: var(--bronze-deep); }
.pm .xfaq__a { padding: 0 1.4rem 1.4rem; color: var(--muted); font-size: .95rem; }

/* ── contact ────────────────────────────────────────────────────────────── */
.pm-contact { position: relative; isolation: isolate; background: var(--night); color: var(--bone); padding-block: clamp(3.75rem, 7.5vw, 6rem); overflow: hidden; }
.pm-contact__bg { position: absolute; inset: -60px 0; z-index: -1; transform: translateY(var(--par, 0)); }
.pm-contact__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 20, 28, .92) 0%, rgba(14, 20, 28, .74) 50%, rgba(14, 20, 28, .55) 100%); }
.pm-contact__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.pm-contact__pillars { display: grid; gap: .9rem; margin-top: 2rem; }
.pm-contact__pillars li { display: flex; align-items: center; gap: .8rem; font: 500 .74rem/1 var(--tech); letter-spacing: .16em; text-transform: uppercase; }
.pm-contact__call { display: grid; gap: .1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-light); }
.pm-contact__call .pm-label { margin: 0; }
.pm-pending { justify-self: start; color: rgba(243, 241, 236, .82); border-bottom: 1px dashed var(--bronze); cursor: help; }
.pm-contact__card { background: var(--white); color: var(--text); padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); border-radius: 2px; }
.pm-contact__ct { font: 400 1.7rem/1.1 var(--display); color: var(--slate); margin-bottom: 1.3rem; }
.pm .xform label { font: 500 .64rem/1.3 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.pm .xform__opt { color: var(--muted); letter-spacing: .04em; text-transform: none; font-family: var(--sans); }
.pm .xform input:not([type="checkbox"]), .pm .xform select, .pm .xform textarea { min-height: 3rem; font-size: 1rem; padding: .8rem .9rem; border: 1px solid var(--line); background: var(--bone); color: var(--slate); border-radius: 2px; transition: border-color 200ms ease, box-shadow 200ms ease; }
.pm .xform input:focus, .pm .xform select:focus, .pm .xform textarea:focus { border-color: var(--bronze); background: var(--white); outline: none; box-shadow: 0 0 0 3px rgba(196, 154, 98, .22); }
.pm .xform [aria-invalid="true"] { border-color: #B0452F !important; }
.pm .xform__err { font-size: .78rem; color: #B0452F; }
.pm .xform__consent label { font: 400 .78rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.pm .xform__consent input { accent-color: var(--bronze-deep); width: 1.25rem; height: 1.25rem; }
.pm .xp-request__form .xform__submit, .pm .xp-request .xform__submit { min-height: 3.4rem; }
.pm .xform__submit { width: 100%; margin-top: 1.3rem; min-height: 3.3rem; background: var(--bronze); color: var(--night); border-radius: 2px; font: 500 .74rem/1 var(--tech); letter-spacing: .22em; text-transform: uppercase; transition: background-color 220ms ease; }
.pm .xform__submit:hover { background: var(--bronze-soft); }
.pm .xform__preview { margin-top: .85rem; font-size: .74rem; color: var(--muted); text-align: center; }
.pm .xform__done { margin-top: 1.2rem; padding: 1.2rem 1.3rem; background: var(--bone); border-left: 2px solid var(--bronze); outline: none; }
.pm .xform__done-t { font: 400 1.25rem/1.2 var(--display); color: var(--slate); }
.pm .xform__done-b { font-size: .85rem; color: var(--muted); margin-top: .4rem; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.pm-foot { background: var(--night); color: var(--bone); padding-block: clamp(3rem, 6vw, 4.5rem) 2.25rem; border-top: 1px solid var(--line-light); }
.pm-foot__in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto; gap: 2rem clamp(1.5rem, 3vw, 3rem); align-items: start; }
.pm-foot__brand { text-decoration: none; }
.pm-foot__line { margin-top: 1rem; font-size: .88rem; color: rgba(243, 241, 236, .62); max-width: 18rem; }
.pm-foot__k { font: 500 .62rem/1 var(--tech); letter-spacing: .26em; text-transform: uppercase; color: var(--bronze); margin-bottom: 1rem; }
.pm-foot__col ul { display: grid; gap: .1rem; }
.pm-foot__col a { display: inline-block; padding: .3rem 0; font-size: .86rem; color: rgba(243, 241, 236, .72); text-decoration: none; }
.pm-foot__col a:hover { color: var(--bronze-soft); }
.pm-foot__badge { width: 8rem; color: var(--bone); justify-self: end; }
.pm-badge { width: 100%; height: auto; }
.pm-badge .pm-word__name { font-size: 27px; }
.pm-badge .pm-word__sub { font-size: 8.5px; }
.pm-foot__legal { grid-column: 1 / -1; padding-top: 1.4rem; border-top: 1px solid var(--line-light); font-size: .76rem; color: rgba(243, 241, 236, .52); max-width: 62rem; }
.pm-foot__legal--review { border: 0; padding-top: 0; margin-top: -1.2rem; color: var(--bronze-soft); }

.pm .xtoast { background: var(--slate); color: var(--bone); padding: .9rem 1.2rem; font-size: .86rem; border-left: 2px solid var(--bronze); box-shadow: var(--shadow); }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 75rem) {
  .pm-foot__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-foot__brandcol { grid-column: 1 / -1; }
  .pm-foot__badge { display: none; }
  .pm-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-svc__card:nth-child(n) { translate: none; }
}
@media (max-width: 62rem) {
  .pm-hero__in { grid-template-columns: minmax(0, 1fr); }
  .pm-hero__window { justify-self: start; width: min(100%, 20rem); }
  .pm-trust__in, .pm-services__in, .pm-faq__in, .pm-contact__in, .pm-areas__in, .pm-work__head, .pm-compare__in, .pm-arrive__top, .pm-about__head, .pm-team__in { grid-template-columns: minmax(0, 1fr); }
  .pm-arrive__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-services__intro, .pm-faq__head { position: static; }
  .pm-areas__more { grid-column: auto; }
  .pm-about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-step--1, .pm-step--3 { margin-top: 2.5rem; } .pm-step--2 { margin-top: 0; }
}
@media (max-width: 48rem) {
  .pm-hero { min-height: auto; }
  .pm-hero__in { padding-top: 8.75rem; }
  .pm-hero .hero-media__poster { object-position: 60% 50%; }
  .pm-hero__scrim { background: linear-gradient(0deg, rgba(14, 20, 28, .95) 0%, rgba(14, 20, 28, .75) 55%, rgba(14, 20, 28, .4) 100%); }
  .pm-hero__window { display: none; }
  .pm-hero__points { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pm-hero__points div { padding: .8rem 0; border-left: 0; border-bottom: 1px solid var(--line-light); display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
  .pm-hero__points dd { margin: 0; font-size: 1rem; text-align: right; }
  .pm-hero__h { font-size: clamp(2.3rem, 10vw, 3.1rem); }
  .pm-hero .xhero__pp { top: 5.2rem; width: 2.75rem; height: 2.75rem; }
  .pm-van .xvan__car { width: 100%; }
  .pm-van .xvan__scene { padding-inline: 0; }
  .pm-arrive__list { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .pm .xcmp__stage { aspect-ratio: 4 / 5; }
  .pm .xcmp__tabs { margin-bottom: .6rem; }
  .pm-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .pm-about__grid { grid-template-columns: minmax(0, 1fr); }
  .pm-step--1, .pm-step--2, .pm-step--3 { margin-top: 0; }
  .pm-team__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-team__pic--1 { translate: none; }
  .pm-team__pic--2 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .pm-areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm .xgal__grid { grid-auto-columns: 74vw; padding-left: var(--gut); }
  .pm-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-foot__col:last-of-type { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .pm-hero__ctas .pm-btn { width: 100%; }
  .pm-svc__t { font-size: .64rem; letter-spacing: .1em; }
  .pm-svc__b { display: none; }
  .pm-areas__grid { grid-template-columns: minmax(0, 1fr); }
  .pm-areas__grid > li:first-child { grid-column: auto; }
  .pm-compare__panel ul { grid-template-columns: minmax(0, 1fr); }
}