/* =====================================================================
   Pixel Studio Sections — front-end design.
   Ported 1:1 from the approved site mockup. Everything is scoped under
   .pxs with its own tokens/reset so the host theme cannot touch it, and
   every section is full-bleed so the block theme's narrow content column
   cannot cage it.
   ===================================================================== */

/* The reset comes FIRST, before any rule that sets a margin or a padding.
   It used to sit a hundred lines down, after the whole nav block — and because
   `.pxs *` and `.pxs-nav-links` have the same specificity, the later one won and
   silently zeroed every padding the nav declared. The mobile menu sheet had its
   links hard against the screen edge for exactly that reason. */
.pxs *,
.pxs *::before,
.pxs *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* stop the tiny horizontal scroll that full-bleed 100vw can cause (only on our pages) */
.pxs-page { overflow-x: clip; }

/* Block-theme full-bleed fixes — SCOPED to .pxs-page (body class added only when a
   plugin section is on the page) so they never touch Avada or any other theme/page. */
.pxs-page .has-global-padding { padding-left: 0 !important; padding-right: 0 !important; }
.pxs-page .is-layout-constrained,
.pxs-page .wp-block-post-content,
.pxs-page .entry-content,
.pxs-page .wp-block-group { max-width: 100vw !important; }
.pxs-page .alignfull { margin-left: 0 !important; margin-right: 0 !important; }
/* The block theme's flow layout puts a ~19px margin between sibling blocks, which
   showed as a white bar between every one of our sections. Kill it, and paint the
   page background so nothing white can peek through anywhere. */
.pxs-page .pxs-fullbleed { margin-top: 0 !important; margin-bottom: 0 !important; }
.pxs-page, .pxs-page .wp-site-blocks { background: #efeeec; }

/* On our pages the plugin nav + footer are the site chrome: hide the block
   theme's own header, page title and footer template parts (these classes do
   not exist on Avada, so this cannot leak there). */
.pxs-page header.wp-block-template-part,
.pxs-page .wp-site-blocks > header,
.pxs-page h1.wp-block-post-title,
.pxs-page footer.wp-block-template-part,
.pxs-page .wp-site-blocks > footer { display: none !important; }

/* per-device visibility utility (hero buttons, etc.) */
@media (max-width: 768px) { .pxs .pxs-only-d { display: none !important; } }
@media (min-width: 769px) { .pxs .pxs-only-m { display: none !important; } }

/* sticky header / nav */
.pxs-nav.pxs-nav-bar { position: sticky; top: 0; z-index: 2400; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); border-bottom: 1px solid rgba(255,255,255,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 34px -26px rgba(0,0,0,.3); }
/* ---- Floating nav -------------------------------------------------------
   A bar welded to the top edge belongs to the browser; a pill sitting a few
   pixels below it belongs to the page, and lets the hero run full height
   underneath. Fixed rather than sticky so it keeps that offset while scrolling,
   and it condenses once the page moves so it stops competing with the content.
   ------------------------------------------------------------------------ */
.pxs-nav.pxs-nav-float {
	position: fixed;
	/*
	 * Above the page, not merely on top of the theme. Avada containers on the
	 * project pages carry z-index: 2000, so at 300 the whole gallery painted over
	 * the floating nav: the links could not be clicked and on some projects the
	 * bar was not even visible. Chosen to clear 2000 and stay well under the
	 * off-canvas menus and the cookie banner, which must still cover the nav.
	 */
	z-index: 2400;
	/* Centred with auto margins, NOT translateX(-50%): a transformed ancestor
	   becomes the containing block for position:fixed descendants, and the
	   full-screen mobile sheet inside this element was then sized against the
	   pill instead of the viewport — a menu that covered the top third. */
	top: 14px; left: 0; right: 0; margin-inline: auto;
	width: min(1120px, calc(100% - 28px));
	border-radius: 100px;
	border: 0;

	/* A tint you can see through, not a lens.
	   The previous version was properly refractive — an .18 tint over a heavy
	   backdrop-filter, a masked edge band and a conic specular rim. Two things
	   were wrong with it on this site. The masked band and the rim read as a
	   white BORDER drawn around the pill rather than as glass, most obviously on
	   a phone. And a nearly transparent pill takes the colour of whatever is
	   behind it, so it looked like a different component on every page: grey
	   over the hero photograph, white over a flat page.
	   So the tint carries the pill now and the blur only softens what shows
	   through. Same component everywhere, and no border. */
	background-color: rgba(255,255,255,.88);
	background-image: none;
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);

	/* One soft contact shadow, so it sits ON the page. No inset highlights —
	   those were half of the ring. */
	box-shadow:
		0 1px 2px rgba(16,18,24,.05),
		0 12px 30px -20px rgba(16,18,24,.30);
	transition: transform .38s var(--pxs-ease), background-color .35s, width .38s var(--pxs-ease),
		box-shadow .35s, border-radius .38s var(--pxs-ease), top .38s var(--pxs-ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pxs-nav.pxs-nav-float { background-color: rgba(255,255,255,.92); }
}

/* ---- The lens edge and the specular rim: removed --------------------------
   They lived here as ::before (a backdrop-filtered band masked to an 11px
   perimeter) and ::after (a conic-gradient hairline). Together they were the
   "white border around the menu" — correct for glass sitting over a photograph,
   wrong for a pill that has to look the same on a flat page. The rules are gone
   rather than overridden so nothing can bring half of them back.
   ------------------------------------------------------------------------- */
.pxs-nav.pxs-nav-float .pxs-nav-in { position: relative; z-index: 3; }

.pxs-nav.pxs-nav-float .pxs-nav-in { padding: 9px 10px 9px 22px; max-width: none; }
.pxs-nav.pxs-nav-float.is-scrolled {
	width: min(980px, calc(100% - 28px));
	/* Denser once there is content running underneath it. */
	background-color: rgba(255,255,255,.94);
	box-shadow:
		0 1px 2px rgba(16,18,24,.06),
		0 16px 38px -22px rgba(16,18,24,.38);
}

/* ---- The home page starts it lower ---------------------------------------
   At the top of the home page the pill is competing with the hero for the same
   band of screen, so it drops clear of it and takes its place at the top edge
   the moment the page moves. Home only: everywhere else the content starts
   right under the header and the offset would just be a gap.
   ------------------------------------------------------------------------ */
body.home .pxs-nav.pxs-nav-float { top: clamp(26px, 4.4vw, 52px); }
body.home .pxs-nav.pxs-nav-float.is-scrolled { top: 14px; }

/* ---- Brand: the tall mark at rest, the compact one once they scroll ---- */
.pxs-nav-brand { position: relative; display: inline-flex; align-items: center; }
.pxs-nav-mark { display: inline-flex; align-items: center; transition: opacity .3s var(--pxs-ease), transform .38s var(--pxs-ease); }
.pxs-nav-mark-rest { flex-direction: column; align-items: flex-start; line-height: .96; }
.pxs-nav-mark-rest b { font-family: var(--pxs-sans); font-weight: 700; font-size: clamp(17px,1.5vw,21px); letter-spacing: -.03em; display: block; }
/* The compact mark is stacked on top of the tall one and fades in over it, so
   the bar does not jump when they swap. */
.pxs-nav-mark-small { position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(.96); opacity: 0; pointer-events: none; white-space: nowrap; font-family: var(--pxs-sans); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.pxs-nav.is-scrolled .pxs-nav-mark-rest { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.pxs-nav.is-scrolled .pxs-nav-mark-small { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
.pxs-nav-logo-rest { max-height: 46px; }
.pxs-nav.is-scrolled .pxs-nav-logo-rest { max-height: 32px; }
/* Roomier before they scroll, because the mark is taller then. */
.pxs-nav.pxs-nav-float .pxs-nav-in { transition: padding .38s var(--pxs-ease); }
.pxs-nav.pxs-nav-float.is-scrolled .pxs-nav-in { padding-top: 7px; padding-bottom: 7px; }
/* Out of the way going down, back the instant they go up. */
.pxs-nav.pxs-nav-float.is-away { transform: translateY(calc(-100% - 22px)); }
.pxs-nav.pxs-nav-float.pxs-nav-open { transform: none; }

.pxs-nav-scrim { display: none; }
@media (max-width: 860px) { .pxs-nav.pxs-nav-open .pxs-nav-scrim { display: block; position: fixed; inset: 0; z-index: 1; } }

.pxs-nav-in { max-width: var(--pxs-wide); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px clamp(16px,4vw,40px); }
.pxs-nav-brand { display: inline-flex; align-items: center; font-family: var(--pxs-sans); font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--pxs-ink); }
.pxs-nav-logo { max-height: 32px; width: auto; }
.pxs-nav-links { display: flex; align-items: center; gap: clamp(18px,2vw,30px); }
.pxs-nav-link { font-family: var(--pxs-sans); font-weight: 500; font-size: 15px; color: var(--pxs-ink2); transition: color .2s; }
.pxs-nav-link:hover { color: var(--pxs-accent); }
.pxs-nav-cta { margin-left: 6px; padding: 11px 22px !important; font-size: 14px !important; }
.pxs-nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; z-index: 2; }
.pxs-nav-burger span { display: block; width: 24px; height: 2px; background: var(--pxs-ink); border-radius: 2px; transition: transform .3s var(--pxs-ease), opacity .2s; }
@media (max-width: 860px) {
	.pxs-nav-burger { display: flex; }
	/* Closed, this panel parks off-screen. It is position:fixed, so the page's
	   overflow-x:clip cannot contain it and it added ~300px of horizontal scroll
	   on every phone — visibility:hidden takes it out of the overflow entirely. */
	/* This panel is position:fixed, so neither overflow-x:clip nor visibility:hidden
	   keeps it out of the page's scroll width — parked off-screen it added ~300px of
	   horizontal scroll on every phone. display:none is the only thing that removes
	   it from layout; the slide-in is an animation on open instead of a transition. */
	/* The pill stays legible on top of its own sheet, so the brand and the close
	   button never sit on a transparent strip. */
	.pxs-nav.pxs-nav-open .pxs-nav-in { position: relative; z-index: 3; }
	/* backdrop-filter makes an element a containing block for position:fixed
	   descendants, exactly as a transform does — so the glass on the pill was
	   still sizing the sheet against the pill after the transform was removed.
	   The pill goes opaque while its sheet is open; there is nothing behind it
	   to blur at that point anyway. */
	.pxs-nav.pxs-nav-open { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
	.pxs-nav-links { display: none; position: fixed; inset: 0; z-index: 2; width: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 104px 26px 40px; background: rgba(252,251,250,.88); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); }
	.pxs-nav.pxs-nav-open .pxs-nav-links { display: flex; animation: pxs-nav-in .32s var(--pxs-ease) both; }
	@keyframes pxs-nav-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
	/* Big enough to hit with a thumb, and separated so the list reads as a list.
	   Scoped to the sheet: this used to be a blanket .pxs .pxs-nav-link, written
	   when the sheet was the only place a nav link appeared on a phone. The
	   section strip carries the same class, and inherited a width:100% and a
	   divider from it — every item stretched to the full strip. */
	.pxs .pxs-nav-links .pxs-nav-link { font-family: var(--pxs-sans); font-weight: 600; font-size: 26px; letter-spacing: -.02em; color: var(--pxs-ink); padding: 15px 0; width: 100%; border-bottom: 1px solid rgba(0,0,0,.07); }
	.pxs .pxs-nav-links .pxs-nav-link:last-of-type { border-bottom: 0; }
	.pxs-nav-cta { margin: 22px 0 0; width: 100%; justify-content: center; font-size: 16px !important; padding: 15px 22px !important; }
	.pxs-nav.pxs-nav-float { top: 10px; width: calc(100% - 20px); border-radius: 22px; }
	body.home .pxs-nav.pxs-nav-float { top: 26px; }
	body.home .pxs-nav.pxs-nav-float.is-scrolled { top: 10px; }
	.pxs-nav.pxs-nav-float .pxs-nav-in { padding: 8px 8px 8px 16px; }
	.pxs-nav.pxs-nav-open .pxs-nav-burger { position: relative; z-index: 3; }
	.pxs-nav.pxs-nav-open.pxs-nav-float { background: rgba(255,255,255,.97); }
	.pxs-nav.pxs-nav-open .pxs-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.pxs-nav.pxs-nav-open .pxs-nav-burger span:nth-child(2) { opacity: 0; }
	.pxs-nav.pxs-nav-open .pxs-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

.pxs {
	--pxs-bg: #efeeec;
	--pxs-bg2: #e6e5e2;
	--pxs-ink: #0d0d0d;
	--pxs-ink2: #2a2a2a;
	--pxs-grey: #565656;
	--pxs-faint: #8c8c8c;
	--pxs-white: #fff;
	--pxs-accent: #ff5d29;
	--pxs-glass: rgba(255, 255, 255, .14);
	--pxs-glass-brd: rgba(255, 255, 255, .35);
	--pxs-glassL: rgba(255, 255, 255, .62);
	--pxs-glassL-brd: rgba(255, 255, 255, .85);
	--pxs-sans: "Inter Tight", Arial, Helvetica, sans-serif;
	--pxs-body: "Inter", Arial, Helvetica, sans-serif;
	--pxs-mono: "Roboto Mono", Monaco, monospace;
	--pxs-wrap: 1280px;
	--pxs-wide: 1560px;
	--pxs-r: 26px;
	--pxs-ease: cubic-bezier(.2, .7, .2, 1);

	font-family: var(--pxs-body);
	color: var(--pxs-ink);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}


/* Host-theme isolation (Avada / custom themes): everything inherits OUR base
   typography from .pxs, so the host's font, size, colour and line-height cannot
   leak in. Our own element rules (headings, mono eyebrows, buttons) override this. */
.pxs { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; letter-spacing: normal; text-transform: none; }
.pxs * { font-family: inherit; }
.pxs button, .pxs input, .pxs select, .pxs textarea { font-family: inherit; font-size: 100%; line-height: 1.3; color: inherit; letter-spacing: inherit; }
.pxs svg, .pxs video { max-width: 100%; }

/* generic crossfade media slider (offer cards, price tiers, etc.) */
.pxs-slides { position: absolute; inset: 0; display: block; }
.pxs-slides .pxs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.pxs-slides .pxs-slide.is-active { opacity: 1; }
.pxs-slides .pxs-slide img, .pxs-slides .pxs-slide video { width: 100%; height: 100%; object-fit: cover; }

.pxs a { color: inherit; text-decoration: none; }
/* No link lines anywhere in our sections, in any state. Avada and the browser
   both underline links on hover/focus/active and the design never wants that:
   a link here is a card, a button or an accent word, and the rule is scoped to
   .pxs so it cannot touch the theme's own content. */
.pxs a, .pxs a:hover, .pxs a:focus, .pxs a:active, .pxs a:visited,
.pxs button, .pxs button:hover, .pxs button:focus, .pxs button:active,
.pxs summary, .pxs summary:hover, .pxs [role="button"] { text-decoration: none !important; }
.pxs img { display: block; max-width: 100%; }
.pxs h1, .pxs h2, .pxs h3 {
	font-family: var(--pxs-sans);
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.02;
}

/* A fragment jump lands the target at the very top of the viewport, which on
   this site is underneath a fixed pill. Every section and every named anchor
   keeps the pill's height clear of itself. */
.pxs.pxs-sec, .pxs [id^="pixel-"], #pixel-photography { scroll-margin-top: clamp(78px, 9vw, 104px); }

/* full-bleed: break out of any themed (centered) content column */
.pxs-fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Avada's builder rows carry overflow-x: clip. A full-bleed section lays out
   correctly at 0 -> 100vw and is then CLIPPED back to the row's own box, which is
   inset by #main's padding and Avada's site width — so on a 390px phone the
   section painted 40 -> 350 and the headline lost a letter at each end. Layout was
   never wrong, the paint was clipped, which is why every geometry measurement
   looked fine and only a screenshot showed it.

   Widen the clip box rather than removing the clip. Removing it lets whatever a
   section legitimately overflows (marquees, the scrolling plan) reach the document
   and add 6-16px of sideways scroll. Kept as a clip that simply matches the region
   the sections are allowed to fill, both stay true: sections paint in full, and
   nothing can scroll sideways. Plugin pages only. */
.pxs-page #main {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.pxs-page .fusion-row {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Avada's side-header layout is the one case where 100vw is wrong: a fixed menu
   occupies one gutter, so reaching the viewport edge slides the section UNDER the
   menu and cuts off its left edge. Mirror Avada's own rule exactly — same 1025px
   breakpoint, same --side_header_width property — so the section spans the region
   Avada actually reserves for content.

   Below 1025px Avada drops the side header, this block never applies, and the plain
   viewport breakout above stays in charge. That is deliberate: mobile was never
   broken and must not be touched by a desktop fix.

   The margin resolves correctly for a left OR right header and at any nesting
   depth, because every builder column is centred inside the region: adding half the
   header width re-centres the section on the region regardless of the column's own
   width. Verified against the live page — 380px header, columns of 1310px and
   1260px, both land on 380 -> 1720. */
@media only screen and (min-width: 1025px) {
	.side-header.pxs-page .pxs-fullbleed {
		width: calc(100vw - var(--side_header_width, 280px));
		max-width: calc(100vw - var(--side_header_width, 280px));
		margin-left: calc(50% - 50vw + var(--side_header_width, 280px) / 2);
		margin-right: 0;
	}
}

.pxs .pxs-wrap { max-width: var(--pxs-wrap); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.pxs .pxs-wrap.pxs-wide { max-width: var(--pxs-wide); }

.pxs .pxs-eyebrow {
	font-family: var(--pxs-mono);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: 11px;
	color: var(--pxs-accent);
	display: inline-block;
	margin-bottom: 14px;
}

/* NOTE: sections carry BOTH .pxs and .pxs-sec on the same element, so these must be
   compound selectors (.pxs.pxs-sec), not descendant (.pxs .pxs-sec) which never matched. */
/* Every section paints its own background, so no theme-white ever shows between
   them. Individual sections tint from here to signal "this is a new section". */
.pxs.pxs-sec { padding: clamp(84px, 8.5vw, 148px) 0; position: relative; }
.pxs.pxs-sec.pxs-center { text-align: center; }
/* Avada ships `.post-content p { margin: 0 0 20px }` at (0,1,1), which beats any
   single-class rule of ours — so a width-capped paragraph we centred with
   `margin: 0 auto` silently loses its left margin and sits hard left inside its
   own centred column. This re-centres every paragraph in a centred section at
   (0,2,1). It is a no-op for a paragraph that already fills its container. */
.pxs.pxs-center p, .pxs .pxs-center p { margin-left: auto; margin-right: auto; }
/* Section heads are always centered (block + text). The old .pxs .pxs-center .pxs-sec-head
   auto-centering never matched because .pxs-center sits on the same element as .pxs. */
.pxs .pxs-sec-head { max-width: 680px; margin: 0 auto clamp(36px, 4.5vw, 58px); text-align: center; }
.pxs .pxs-sec-head h2 { font-size: clamp(2.2rem, 5.4vw, 3.7rem); margin-bottom: 12px; }

/* glass primitives */
.pxs .pxs-glass {
	background: var(--pxs-glass);
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
	backdrop-filter: blur(22px) saturate(1.5);
	border: 1px solid var(--pxs-glass-brd);
	box-shadow: 0 20px 60px -30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
}

/* buttons */
.pxs .pxs-btn {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--pxs-sans); font-weight: 600; font-size: 15px;
	padding: 15px 26px; border-radius: 100px; border: 1px solid transparent;
	cursor: pointer; transition: .22s; white-space: nowrap;
}
.pxs .pxs-btn svg { width: 16px; height: 16px; }
.pxs .pxs-btn-primary { background: var(--pxs-accent); color: #fff; box-shadow: 0 10px 30px -10px rgba(255,93,41,.6); }
.pxs .pxs-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(255,93,41,.7); }
.pxs .pxs-btn-lg { padding: 17px 32px; font-size: 16px; }

/* =========================================================
   HERO
   ========================================================= */
.pxs-hero {
	position: relative;
	min-height: 90svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: #fff;
	background: #101012;
}
.pxs-hero.pxs-h-full { min-height: 90svh; }
.pxs-hero.pxs-h-tall { min-height: 82svh; }
.pxs-hero.pxs-h-medium { min-height: 70svh; }

/* staggered entrance on load */
@keyframes pxs-hero-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pxs-js .pxs-hero .pxs-eyebrow { opacity: 0; animation: pxs-hero-up .7s .1s cubic-bezier(.2,.7,.2,1) forwards; }
.pxs-js .pxs-hero-row { opacity: 0; animation: pxs-hero-up .7s .55s cubic-bezier(.2,.7,.2,1) forwards; }

.pxs-hero-bg { position: absolute; inset: 0; z-index: 0; }
.pxs-hero-bg .pxs-slide {
	position: absolute; inset: 0; opacity: 0;
	transition: opacity 1.6s ease;
	transform: scale(1.06);
}
.pxs-hero-bg .pxs-slide.is-active { opacity: 1; }
.pxs-hero-bg .pxs-slide img { width: 100%; height: 100%; object-fit: cover; }
/* Ken Burns only when the transition mode asks for it */
.pxs-hero-bg[data-anim="zoom"] .pxs-slide { animation: pxs-kb 12s ease-in-out infinite alternate; }
@keyframes pxs-kb { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.pxs-hero-bg[data-anim="fade"] .pxs-slide { transform: none; }
.pxs-hero-bg[data-anim="slide"] .pxs-slide { transition: opacity 1.1s ease, transform 1.1s var(--pxs-ease); transform: translateX(5%); }
.pxs-hero-bg[data-anim="slide"] .pxs-slide.is-active { transform: translateX(0); }

.pxs-hero-bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.12) 40%, rgba(0,0,0,.62) 100%);
}
.pxs-slide-empty {
	opacity: 1;
	background: radial-gradient(120% 120% at 20% 10%, #2a2a2e 0%, #131316 60%, #0c0c0e 100%);
}

.pxs-hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(34px, 5vw, 60px); }
.pxs-hero-card { max-width: 900px; }
.pxs-hero.pxs-a-center .pxs-hero-inner { text-align: center; }
.pxs-hero.pxs-a-center .pxs-hero-card { max-width: 900px; margin: 0 auto; }

.pxs .pxs-hero-card h1 {
	font-size: clamp(2.7rem, 6.8vw, 5.6rem);
	color: #fff !important; margin-bottom: 22px;
	text-shadow: 0 2px 34px rgba(0,0,0,.45);
}
.pxs-hero-card h1 em { font-style: normal; color: var(--pxs-accent); }
.pxs-hero-card h1 .pxs-w-accent { color: var(--pxs-accent); }

.pxs-hero-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* On a wide hero the price belongs at the far edge, opposite the call to action:
   it is the answer to "what does this cost", not part of the button group.
   Left-aligned heroes only, and only where there is room to separate them. */
@media (min-width: 861px) {
	.pxs-hero.pxs-a-left .pxs-hero-row .pxs-pricepill { order: 9; margin-left: auto; }
}
.pxs-hero.pxs-a-center .pxs-hero-row { justify-content: center; }

.pxs-pricepill {
	display: inline-flex; align-items: baseline; gap: 8px;
	padding: 13px 22px; border-radius: 100px;
	background: rgba(255,255,255,.16);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,.4); color: #fff; transition: .22s;
}
.pxs-pricepill:hover { background: rgba(255,255,255,.26); }
.pxs-pricepill b { font-family: var(--pxs-sans); font-weight: 600; font-size: 20px; }
.pxs-pricepill span { font-size: 12.5px; color: #e6e6e6; }

.pxs-hero-ghost {
	color: #fff; font-family: var(--pxs-sans); font-weight: 600; font-size: 15px;
	display: inline-flex; align-items: center; gap: 7px; opacity: .92;
}
.pxs-hero-ghost:hover { opacity: 1; color: var(--pxs-accent); }
.pxs-hero-ghost svg { width: 18px; height: 18px; }

.pxs-dots { display: none !important; position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: 16px; display: flex; gap: 8px; }
.pxs-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); transition: .3s; }
.pxs-dots i.on { background: #fff; width: 22px; border-radius: 100px; }

/* mobile: shorter hero, smaller type, CTA and portfolio link side by side */
@media (max-width: 680px) {
	.pxs-hero, .pxs-hero.pxs-h-full, .pxs-hero.pxs-h-tall, .pxs-hero.pxs-h-medium { min-height: 72svh; max-height: 72svh; }
	.pxs-hero-card h1 { font-size: clamp(2.4rem, 10.2vw, 3.2rem); margin-bottom: 18px; }
	.pxs-hero-inner { padding-bottom: clamp(26px, 6vw, 40px); }
	.pxs-hero-row { gap: 10px 14px; flex-wrap: wrap; align-items: center; }
	.pxs-hero-row .pxs-btn { width: auto; flex: 0 1 auto; }
	.pxs .pxs-hero-row .pxs-btn.pxs-btn-lg { padding: 14px 21px; font-size: 15.5px; }
	.pxs-hero-ghost { font-size: 15.5px; margin-left: auto; }   /* sits on the right of the CTA */
	/* lighter scrim on a phone: the photo should still read through it */
	.pxs-hero-bg::after { background: linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.05) 42%, rgba(0,0,0,.46) 100%); }
	.pxs-hero-ghost svg { width: 16px; height: 16px; }
	.pxs-pricepill { order: 3; flex-basis: 100%; padding: 10px 16px; }
	.pxs-pricepill b { font-size: 17px; }
}

/* =========================================================
   ANIMATED HEADINGS (optional; used when a heading anim != none).
   Units are hidden only when JS is on and not yet played, so with JS
   off or reduced motion the text is always visible.
   ========================================================= */
.pxs-anim .pxs-w, .pxs-anim .pxs-c { display: inline-block; will-change: transform, opacity; }
.pxs-js .pxs-anim[data-anim="words"] .pxs-w,
.pxs-js .pxs-anim[data-anim="chars"] .pxs-c { opacity: 0; transform: translateY(.62em); }
.pxs-js .pxs-anim[data-anim="fade"] .pxs-line { display: inline-block; opacity: 0; transform: translateY(.4em); }
.pxs-js .pxs-anim[data-anim="blur"] .pxs-line { display: inline-block; opacity: 0; filter: blur(14px); }
.pxs-js .pxs-anim.pxs-play[data-anim="words"] .pxs-w { animation: pxs-rise .6s var(--pxs-ease) both; animation-delay: calc(var(--i) * .05s); }
.pxs-js .pxs-anim.pxs-play[data-anim="chars"] .pxs-c { animation: pxs-rise .5s var(--pxs-ease) both; animation-delay: calc(var(--i) * .028s); }
.pxs-js .pxs-anim.pxs-play[data-anim="fade"] .pxs-line { animation: pxs-rise .7s var(--pxs-ease) both; }
.pxs-js .pxs-anim.pxs-play[data-anim="blur"] .pxs-line { animation: pxs-blurin .8s var(--pxs-ease) both; }
@keyframes pxs-rise { from { opacity: 0; transform: translateY(.62em); } to { opacity: 1; transform: none; } }
@keyframes pxs-blurin { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }

/* section reveal (whole block fade-up, mirrors the mockup .reveal) */
.pxs-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s var(--pxs-ease); }
.pxs-reveal.pxs-in { opacity: 1; transform: none; }

/* =========================================================
   BEFORE / AFTER
   ========================================================= */
/* A touch darker than the sections around it, and no white hotspot at the top —
   that radial was what read as a "white bar" between sections. */
.pxs-ba-section {
	background:
		radial-gradient(1100px 700px at 12% -5%, #fff 0%, transparent 55%),
		radial-gradient(900px 700px at 100% 8%, #f6ede9 0%, transparent 50%),
		linear-gradient(180deg, var(--pxs-bg), var(--pxs-bg2));
}
.pxs-ba-title { color: var(--pxs-ink); }
.pxs-ba-section .pxs-sec-head { margin-bottom: clamp(40px, 6vw, 70px); }
.pxs-ba-section .pxs-slider { margin-top: clamp(10px, 3vw, 30px); }

.pxs-slider {
	position: relative; width: 100%; aspect-ratio: 16 / 9;
	border-radius: var(--pxs-r); overflow: hidden;
	user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize;
	box-shadow: 0 40px 90px -50px rgba(0,0,0,.5);
}
.pxs-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pxs-slider .pxs-after { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.pxs-slider .pxs-after img { width: auto; height: 100%; max-width: none; }
.pxs-slider .pxs-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255,255,255,.9); transform: translateX(-50%); }
.pxs-slider .pxs-knob {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 48px; height: 48px; border-radius: 50%;
	background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center;
}
/* Three backdrop-filter layers — the knob and both tags — have to be
   recomposited on every frame of a drag, which is the whole reason this felt
   sticky on a phone. On touch they become flat translucent shapes, which look
   near-identical over a photograph and cost nothing. */
@media (hover: none), (max-width: 860px) {
	.pxs-slider .pxs-knob { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.34); }
	.pxs-tag { -webkit-backdrop-filter: none; backdrop-filter: none; }
	.pxs-tag.pxs-b { background: rgba(0,0,0,.62); }
	.pxs-slider .pxs-after { will-change: width; }
	.pxs-slider.is-dragging { will-change: contents; }
}
.pxs-slider .pxs-knob svg { width: 22px; height: 22px; color: #fff; }
.pxs-slider .pxs-handle:focus-visible { outline: none; }
.pxs-slider .pxs-handle:focus-visible .pxs-knob { box-shadow: 0 0 0 3px var(--pxs-accent); }
.pxs-tag {
	position: absolute; top: 16px; font-family: var(--pxs-mono); font-size: 10px;
	letter-spacing: .08em; text-transform: uppercase; padding: 7px 13px; border-radius: 100px;
	color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pxs-tag.pxs-b { left: 16px; background: rgba(0,0,0,.45); }
.pxs-tag.pxs-a { right: 16px; background: rgba(255,93,41,.85); }

.pxs-ba-empty {
	display: grid; place-items: center; color: rgba(255,255,255,.9); font-weight: 600;
	position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #3a3a3f 0 14px, #313136 14px 28px);
}
.pxs-ba-empty.pxs-ba-empty2 { background: repeating-linear-gradient(45deg, #ff6f3e 0 14px, #ef5f2f 14px 28px); }

/* =========================================================
   SHARED: bands, glassL, extra buttons, sec-head paragraph
   ========================================================= */
.pxs .pxs-sec-head p { color: var(--pxs-grey); font-size: clamp(15px, 1.4vw, 17px); }
.pxs-band { background: linear-gradient(180deg, #fbfaf9, #eeece9); border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
.pxs-band-dark { background: #121212; color: #e8e8e8; }
.pxs-band-dark .pxs-sec-head h2 { color: #fff; }
.pxs-band-dark .pxs-sec-head p { color: #a9a9a9; }

.pxs .pxs-glassL {
	background: var(--pxs-glassL);
	-webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
	border: 1px solid var(--pxs-glassL-brd);
	box-shadow: 0 26px 70px -44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7);
}
.pxs .pxs-btn-dark { background: var(--pxs-ink); color: #fff; }
.pxs .pxs-btn-dark:hover { transform: translateY(-2px); }
.pxs .pxs-btn-line { background: transparent; border-color: rgba(0,0,0,.16); color: var(--pxs-ink); }
.pxs .pxs-btn-line:hover { border-color: var(--pxs-accent); color: var(--pxs-accent); }
.pxs .pxs-btn-block { width: 100%; justify-content: center; }

/* generic image placeholder for empty media slots */
.pxs-pf-empty { position: absolute; inset: 0; display: block; background: repeating-linear-gradient(45deg, #e2e2e2 0 14px, #efefef 14px 28px); }

/* =========================================================
   LISTING SCORE
   ========================================================= */
.pxs-score { border-radius: var(--pxs-r); padding: clamp(30px,4vw,56px); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,52px); align-items: center; position: relative; overflow: hidden; }
.pxs-score-bg { position: absolute; inset: 0; z-index: 0; } .pxs-score-bg img { width: 100%; height: 100%; object-fit: cover; }
.pxs-score-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(15,15,15,.86), rgba(20,20,20,.66)); }
.pxs-score > *:not(.pxs-score-bg) { position: relative; z-index: 1; }
.pxs-score h2 { font-size: clamp(1.8rem,3.6vw,2.7rem); color: #fff; margin-bottom: 14px; }
.pxs-score p { color: #d2d2d2; font-size: 15.5px; margin-bottom: 22px; max-width: 460px; }
.pxs-score-form { display: flex; gap: 10px; flex-wrap: wrap; }
.pxs-score-form input { flex: 1; min-width: 210px; padding: 16px 20px; border-radius: 100px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-family: var(--pxs-body); font-size: 15px; }
.pxs-score-form input::placeholder { color: #bcbcbc; }
.pxs-score-note { color: #a9a9a9; font-size: 12.5px; margin-top: 12px; }
.pxs-score-mini { border-radius: 20px; padding: 26px; }
.pxs-score-ring { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.pxs-ring { width: 78px; height: 78px; border-radius: 50%; background: conic-gradient(var(--pxs-accent) 0 61%, rgba(255,255,255,.18) 61% 100%); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pxs-ring i { width: 60px; height: 60px; border-radius: 50%; background: rgba(20,20,20,.9); display: flex; align-items: center; justify-content: center; font-family: var(--pxs-sans); font-weight: 700; font-size: 22px; font-style: normal; color: #fff; }
.pxs-score-ring div b { font-family: var(--pxs-sans); font-size: 15px; color: #fff; } .pxs-score-ring div span { display: block; color: #bcbcbc; font-size: 12.5px; }
.pxs-score-mini ul { list-style: none; }
.pxs-score-mini li { font-size: 13px; color: #dcdcdc; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; gap: 9px; }
.pxs-score-mini li b { color: var(--pxs-accent); font-family: var(--pxs-mono); font-size: 11px; }

/* =========================================================
   PORTFOLIO
   ========================================================= */
.pxs-pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pxs-pf-card { position: relative; display: block; border-radius: var(--pxs-r); overflow: hidden; aspect-ratio: 3/2; box-shadow: 0 26px 70px -46px rgba(0,0,0,.5); }
.pxs-pf-card img { width: 100%; height: 100%; object-fit: cover; transition: .6s; }
.pxs-pf-card:hover img { transform: scale(1.05); }
.pxs-pf-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.62)); }
.pxs-pf-info { position: absolute; z-index: 2; left: 0; bottom: 0; padding: 24px 26px; text-align: left; }
.pxs-pf-info h3 { color: #fff; font-size: clamp(20px,2.3vw,28px); margin-bottom: 6px; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.pxs-pf-m { color: #e2e2e2; font-size: 12.5px; font-family: var(--pxs-mono); letter-spacing: .03em; }
.pxs-pf-more { position: absolute; z-index: 2; right: 20px; bottom: 22px; font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: 9px 15px; border-radius: 100px; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.4); transition: .22s; }
.pxs-pf-card:hover .pxs-pf-more { background: var(--pxs-accent); border-color: var(--pxs-accent); }
.pxs-pf-see { margin-top: 26px; }

/* =========================================================
   SERVICES + PRICING
   ========================================================= */
.pxs-offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align: left; }
.pxs-ocard { border-radius: var(--pxs-r); overflow: hidden; display: flex; flex-direction: column; background: #fff; box-shadow: 0 26px 70px -50px rgba(0,0,0,.4); border: 1px solid rgba(0,0,0,.05); transition: .3s; }
.pxs-ocard:hover { transform: translateY(-5px); box-shadow: 0 40px 90px -50px rgba(0,0,0,.5); }
.pxs-omedia { position: relative; aspect-ratio: 3/2; overflow: hidden; background: #111; }
.pxs-omedia img { width: 100%; height: 100%; object-fit: cover; display: block; transition: .6s; }
.pxs-ocard:hover .pxs-omedia img { transform: scale(1.04); }
.pxs-obody { padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pxs-obody h3 { font-size: 21px; margin-bottom: 3px; }
.pxs-opr { font-family: var(--pxs-mono); font-size: 12px; color: var(--pxs-grey); letter-spacing: .02em; }
.pxs-osmall { padding: 11px 20px; font-size: 14px; flex: 0 0 auto; }

/* ===== redesigned "What we offer" ===== */
html.pxs-modal-open { overflow: hidden !important; }
.pxs-offer2 { display: flex; flex-direction: column; gap: 20px; }

/* main service — photography */
.pxs-offer-main { border-radius: var(--pxs-r); overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 30px 80px -55px rgba(0,0,0,.5); }
.pxs-offer-main-media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #eee; }
.pxs-offer-main-media > img, .pxs-offer-main-media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs-offer-main-media .pxs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.pxs-offer-main-media .pxs-slide.is-active { opacity: 1; }
.pxs-offer-main-media .pxs-slide img, .pxs-offer-main-media .pxs-slide video { width: 100%; height: 100%; object-fit: cover; }
.pxs-offer-main-body { text-align: center; padding: clamp(24px,3.5vw,40px); max-width: 660px; margin: 0 auto; }
.pxs-offer-tag { font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pxs-accent); }
.pxs-offer-main-body h3 { font-family: var(--pxs-sans); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.6rem,3.2vw,2.3rem); margin: 10px 0; }
.pxs-offer-main-body p { color: var(--pxs-grey); font-size: 15.5px; max-width: 520px; margin: 0 auto; }
.pxs-offer-main-foot { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.pxs-offer-price { font-family: var(--pxs-sans); font-weight: 700; font-size: 22px; }

/* extension band */
.pxs-offer-ext { text-align: center; border-radius: var(--pxs-r); padding: clamp(24px,3.5vw,40px); background: linear-gradient(180deg,#fff,#f4f2ef); border: 1px solid rgba(255,93,41,.2); }
.pxs-offer-ext-plus { font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pxs-accent); display: inline-flex; align-items: center; gap: 7px; }
.pxs-offer-ext-plus::before { content: "+"; font-size: 15px; line-height: 1; }
.pxs-offer-ext-txt h4 { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(1.3rem,2.4vw,1.7rem); letter-spacing: -.02em; margin: 10px 0 8px; }
.pxs-offer-ext-txt p { color: var(--pxs-grey); font-size: 14.5px; max-width: 520px; margin: 0 auto 12px; }
.pxs-offer-ext-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; color: var(--pxs-accent); }
.pxs-offer-ext-link svg { width: 16px; height: 16px; }
.pxs-offer-ext-thumbs { display: flex; justify-content: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.pxs-offer-ext-thumb { width: 100px; height: 128px; border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 16px 34px -20px rgba(0,0,0,.55); }
.pxs-offer-ext-thumb img, .pxs-offer-ext-thumb video { width: 100%; height: 100%; object-fit: cover; }

/* secondary services */
.pxs-offer-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pxs-osec-card { border-radius: var(--pxs-r); overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 26px 70px -52px rgba(0,0,0,.4); display: flex; flex-direction: column; transition: transform .25s var(--pxs-ease), box-shadow .25s; }
.pxs-osec-card:hover { transform: translateY(-4px); box-shadow: 0 40px 90px -50px rgba(0,0,0,.5); }
.pxs-osec-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #eee; }
.pxs-osec-media img, .pxs-osec-media video { width: 100%; height: 100%; object-fit: cover; }
.pxs-osec-body { padding: 22px 24px 24px; text-align: center; }
.pxs-osec-body h4 { font-family: var(--pxs-sans); font-weight: 600; font-size: 19px; }
.pxs-osec-body p { color: var(--pxs-grey); font-size: 14px; margin-top: 6px; }
.pxs-osec-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.pxs-osec-price { font-family: var(--pxs-mono); font-size: 12.5px; color: var(--pxs-accent); font-weight: 500; }

/* modal */
.pxs-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 22px; }
.pxs-modal[hidden] { display: none; }
.pxs-modal-bg { position: absolute; inset: 0; background: rgba(10,10,10,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pxs-modal-box { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; border-radius: 24px; background: #fff; box-shadow: 0 50px 120px -40px rgba(0,0,0,.6); animation: pxs-pop .35s var(--pxs-ease) both; }
/* The frame takes the shape of what is in it (set inline from the attachment's
   own dimensions), falling back to 16/9. A 3:2 video was losing a third of its
   height to a hard crop, and a low-resolution source has no pixels to spare.
   max-height keeps a tall piece of media from pushing the copy off the screen. */
.pxs-modal-media { position: relative; aspect-ratio: var(--pxs-modal-ar, 16/9); max-height: 56vh; overflow: hidden; background: #111; }
.pxs-modal-media > img, .pxs-modal-media > video { width: 100%; height: 100%; object-fit: cover; }
.pxs-modal-media .pxs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.pxs-modal-media .pxs-slide.is-active { opacity: 1; }
.pxs-modal-media .pxs-slide img, .pxs-modal-media .pxs-slide video { width: 100%; height: 100%; object-fit: cover; }
.pxs-modal-c { padding: 26px 30px 30px; text-align: center; }
.pxs-modal-c h3 { font-family: var(--pxs-sans); font-weight: 600; font-size: 1.5rem; margin-bottom: 12px; }
.pxs-modal-c p { color: var(--pxs-grey); font-size: 14.5px; margin-bottom: 12px; line-height: 1.6; }
.pxs-modal-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.92); border: 0; cursor: pointer; font-size: 20px; line-height: 1; color: #111; box-shadow: 0 6px 20px -6px rgba(0,0,0,.4); }
.pxs-modal-x:hover { background: #fff; }
.pxs-modal-sub { color: var(--pxs-ink) !important; font-weight: 600; font-size: 15px; margin-bottom: 6px !important; }
.pxs-modal-price { font-family: var(--pxs-sans); font-weight: 700; font-size: 24px; color: var(--pxs-accent); margin-bottom: 14px; }
/* A quiet second door: the popup answers the question, this is for someone who
   wants the whole page. Deliberately not a button — the quote is the button. */
.pxs .pxs-modal-page { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; color: var(--pxs-grey); }
.pxs .pxs-modal-page svg { width: 15px; height: 15px; transition: transform .3s var(--pxs-ease); }
.pxs .pxs-modal-page:hover { color: var(--pxs-accent); }
.pxs .pxs-modal-page:hover svg { transform: translateX(4px); }

/* what we offer — featured photography (+ extension in-square) + two smaller */
.pxs-cap { text-transform: capitalize; }
.pxs-offer { display: flex; flex-direction: column; gap: 22px; align-items: center; }

.pxs-offer-photo { width: 100%; max-width: 900px; border-radius: var(--pxs-r); overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 30px 80px -55px rgba(0,0,0,.5); }
.pxs-op-top { display: grid; grid-template-columns: 1.7fr 1fr; }
.pxs-op-img { position: relative; overflow: hidden; background: #eee; min-height: 260px; }
.pxs-op-img img, .pxs-op-img video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
/* extension sub-panel: darker, clearly a bolt-on to the same square */
.pxs-op-ext { display: flex; flex-direction: column; background: #17171a; color: #e9e9e9; padding: 16px; }
.pxs-op-ext-vid { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: #000; }
.pxs-op-ext-vid img, .pxs-op-ext-vid video { width: 100%; height: 100%; object-fit: cover; }
.pxs-op-ext-txt { padding-top: 13px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pxs-op-ext-tag { font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pxs-accent); }
.pxs-op-ext-txt p { font-size: 13.5px; line-height: 1.45; color: #d6d6d6; }
.pxs-op-ext-more { margin-top: auto; align-self: flex-start; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: 10px; padding: 8px 14px; font-family: var(--pxs-sans); font-weight: 600; font-size: 12px; cursor: pointer; transition: .2s; }
.pxs-op-ext-more:hover { background: rgba(255,93,41,.92); border-color: transparent; }
.pxs-op-body { text-align: center; padding: clamp(22px,3vw,34px); }
.pxs-op-body h3 { font-family: var(--pxs-sans); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.5rem,2.8vw,2.1rem); }

.pxs-offer-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: 900px; }
.pxs-o2-card { border-radius: var(--pxs-r); overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 24px 60px -50px rgba(0,0,0,.4); transition: transform .25s var(--pxs-ease), box-shadow .25s; }
.pxs-o2-card:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -50px rgba(0,0,0,.5); }
.pxs-o2-media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: #eee; }
.pxs-o2-media img, .pxs-o2-media video { width: 100%; height: 100%; object-fit: cover; }
.pxs-o2-body { padding: 20px; text-align: center; }
.pxs-o2-body h4 { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(1.1rem,1.6vw,1.35rem); }

/* stacked price: from (above) / amount (large) / unit (below) */
/* What we offer — light, photography centered + biggest, Visual Upgrades attached below it */
.pxs-offer-panel { background: transparent; padding: 0; }
.pxs-offer-panel .pxs-sec-head { margin-bottom: clamp(28px,4vw,50px); }
.pxs-offer-head { max-width: 720px; }
.pxs-offer-head h2 { line-height: 1.06; text-wrap: balance; margin-bottom: 14px; }
.pxs-offer-head p { max-width: 46ch; margin: 0 auto; line-height: 1.55; color: var(--pxs-ink2); text-wrap: pretty; }

.pxs-offer3 { display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: clamp(16px,1.8vw,26px); align-items: start; max-width: 1240px; margin: 0 auto; }
.pxs-offer3 > * { min-width: 0; }
.pxs-o3-main { display: flex; }

.pxs-o3-card, .pxs-o3-photo { position: relative; background: #fff; color: var(--pxs-ink); border: 1px solid rgba(0,0,0,.06); border-radius: var(--pxs-r); overflow: hidden; box-shadow: 0 30px 80px -55px rgba(0,0,0,.5); display: flex; flex-direction: column; width: 100%; transition: transform .28s var(--pxs-ease), box-shadow .28s; }
.pxs-o3-card:hover, .pxs-o3-photo:hover { transform: translateY(-4px); box-shadow: 0 44px 90px -55px rgba(0,0,0,.55); }
.pxs-o3-featured { box-shadow: 0 42px 100px -55px rgba(0,0,0,.6); }

/* media: landscape ~3:2, flush at the top of the card; bigger on the wider featured column */
.pxs-o3-media { position: relative; aspect-ratio: 3/2; overflow: hidden; background: #eee; }
.pxs-o3-media img, .pxs-o3-media video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* body: title, price, button */
.pxs-o3-body { padding: clamp(20px,2.2vw,30px) clamp(18px,2vw,26px) clamp(22px,2.4vw,30px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pxs-o3-body h3 { font-family: var(--pxs-sans); font-weight: 600; letter-spacing: -.015em; color: var(--pxs-ink); font-size: clamp(1.2rem,1.6vw,1.45rem); line-height: 1.22; max-width: 15ch; text-wrap: balance; }
.pxs-o3-featured .pxs-o3-body h3 { font-size: clamp(1.5rem,2vw,2rem); line-height: 1.14; max-width: 18ch; }
.pxs .pxs-o3-body .pxs-btn { margin-top: 10px; padding: 11px 21px; font-size: 14px; }

/* Visual upgrades: attached inside the featured photography card, below its price */
.pxs-o3-ext { display: flex; align-items: center; gap: 16px; margin: 16px 0 0; padding: 16px clamp(16px,1.6vw,22px); background: #f1efec; border: 0; border-top: 1px solid rgba(0,0,0,.08); border-radius: 0; text-align: left; }
.pxs-o3-ext-media { width: clamp(120px,16vw,170px); flex: 0 0 auto; aspect-ratio: 16/10; border-radius: 11px; overflow: hidden; background: #111; position: relative; }
.pxs-o3-ext-media img, .pxs-o3-ext-media video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.pxs-o3-ext-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pxs-o3-ext-tag { font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pxs-accent); display: inline-flex; align-items: center; gap: 6px; }
.pxs-o3-ext-tag::before { content: "+"; font-size: 14px; line-height: 1; }
.pxs-o3-ext-body p { font-size: 14px; line-height: 1.5; color: var(--pxs-ink2); }

/* "Read more": a proper affordance, not mouse-type. Inline arrow link inside the
   upgrades strip, outlined pill under the secondary service cards. */
.pxs .pxs-o3-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; background: none; border: 0; cursor: pointer; font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px; letter-spacing: -.01em; text-transform: none; color: var(--pxs-accent); padding: 2px 0; transition: color .2s, background .2s, border-color .2s; }
.pxs-o3-more svg { width: 15px; height: 15px; transition: transform .25s var(--pxs-ease); }
.pxs-o3-more:hover svg { transform: translateX(3px); }
.pxs-o3-ext-body .pxs-o3-more:hover { color: var(--pxs-ink); }
.pxs .pxs-o3-more-pill { margin-top: 12px; padding: 9px 18px; border: 1px solid rgba(0,0,0,.14); border-radius: 999px; color: var(--pxs-ink2); background: #fff; }
.pxs .pxs-o3-more-pill:hover { color: var(--pxs-accent); border-color: rgba(255,93,41,.45); background: rgba(255,93,41,.06); }

/* desktop ordering: staging left, photography center, floor plans right (mobile keeps source order: photo first) */
@media (min-width: 921px) {
	.pxs-offer3 > .pxs-o3-main { order: 2; }
	.pxs-offer3 > :nth-child(2) { order: 1; }
	.pxs-offer3 > :nth-child(3) { order: 3; }
}

.pxs-price3 { display: flex; flex-direction: column; align-items: center; line-height: 1; margin: 12px 0 16px; }
.pxs-price3-from { font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--pxs-faint); margin-bottom: 6px; }
.pxs-price3-amt { font-family: var(--pxs-sans); font-weight: 700; font-size: clamp(2rem,3.2vw,2.8rem); color: var(--pxs-accent); letter-spacing: -.02em; }
.pxs-price3-unit { font-size: 12.5px; color: var(--pxs-grey); margin-top: 7px; }

/* modal close animation */
@keyframes pxs-modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(14px) scale(.97); } }
.pxs-modal.pxs-closing .pxs-modal-box { animation: pxs-modal-out .45s var(--pxs-ease) forwards; }
.pxs-modal.pxs-closing .pxs-modal-bg { opacity: 0; transition: opacity .45s ease; }

@media (max-width: 700px) {
	.pxs-op-top { grid-template-columns: 1fr; }
	.pxs-op-img { min-height: 220px; aspect-ratio: 16/10; }
	.pxs-op-ext { flex-direction: row; align-items: center; gap: 14px; }
	.pxs-op-ext-vid { width: 118px; flex: 0 0 auto; aspect-ratio: 1; }
	.pxs-op-ext-txt { padding-top: 0; }
	.pxs-offer-two { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
	.pxs-offer-sec { grid-template-columns: 1fr; }
}
.pxs-svc-divider { height: 1px; background: rgba(0,0,0,.08); margin: clamp(50px,7vw,90px) 0 clamp(40px,5vw,70px); }
/* listing-type cards: H2 + 3 contained cards (not full width) */
/* ---- Services band vs Photography band: two clearly separate sections ---- */
.pxs.pxs-services-section { padding: clamp(96px,10vw,170px) 0; }
.pxs.pxs-photo-section { background: linear-gradient(180deg, #fbfaf9, #eeece9); padding: 0; }        /* inner bands own the padding */
.pxs-photo-stack { display: flex; flex-direction: column; }
.pxs-photo-head { padding: clamp(56px,6vw,92px) 0 clamp(16px,2vw,24px); }
.pxs-photo-body { padding: 0 0 clamp(84px,8.5vw,140px); }
/* the description sits right above the apartment image, not under the title */
/* Avada styles every paragraph in the post body with `.post-content p { margin:
   0 0 20px }`. That is (0,1,1) and outranks any single-class rule we write, so
   `margin: 0 auto` on a centred paragraph silently became `margin-left: 0` and
   the text sat hard left inside its own centred column. Every centred paragraph
   below therefore carries the `.pxs` prefix, which is (0,2,0) and out of
   Avada's reach. A new centred <p> needs the same treatment. */
.pxs .pxs-photo-lede { text-align: center; max-width: 620px; margin: 0 auto clamp(18px,2.4vw,28px); color: var(--pxs-grey); font-size: clamp(15px,1.4vw,17px); line-height: 1.6; }
/* the platform band is its own visual step inside the photography section */
.pxs-platband { border-bottom: 1px solid rgba(0,0,0,.07); padding: clamp(84px,8.5vw,140px) 0 clamp(48px,5vw,76px); }

/* ---- sliding platform logos ---- */
.pxs-logostrip { margin: 0 auto clamp(30px,4vw,46px); max-width: 1200px; }
.pxs-logostrip-h { text-align: center; font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pxs-faint); margin-bottom: 18px; }
.pxs-logostrip-mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pxs-logostrip-track { display: flex; align-items: center; gap: clamp(30px,4vw,58px); width: max-content; animation: pxs-marquee calc(var(--pxs-n, 10) * 3.2s) linear infinite; }
.pxs-logostrip:hover .pxs-logostrip-track { animation-play-state: paused; }
@keyframes pxs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pxs-logostrip-i { flex: 0 0 auto; display: flex; align-items: center; }
.pxs-logostrip-i img { max-height: 30px; width: auto; filter: grayscale(1); opacity: .55; transition: .25s; }
.pxs-logostrip:hover .pxs-logostrip-i img { opacity: .75; }
.pxs-logostrip-t { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(16px,1.8vw,21px); letter-spacing: -.02em; color: var(--pxs-ink2); opacity: .72; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .pxs-logostrip-track { animation: none; } }

.pxs-plat-h2 { font-family: var(--pxs-sans); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.5rem,3vw,2.1rem); margin-bottom: clamp(24px,3vw,38px); text-align: center; }
.pxs .pxs-plat-h2 { font-weight: 700 !important; font-size: clamp(1.9rem,3.4vw,3.1rem) !important; line-height: 1.06 !important; letter-spacing: -.03em; }
.pxs-typecards { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,22px); max-width: 1200px; margin: 0 auto clamp(28px,4vw,44px); }
.pxs-typecard { background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.06); border-radius: 18px; padding: clamp(18px,1.8vw,24px); text-align: left; display: flex; flex-direction: column; justify-content: center; }
.pxs-typecard-eb { font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pxs-accent); display: block; }
.pxs-typecard-h { font-family: var(--pxs-sans); font-weight: 600; letter-spacing: -.015em; font-size: clamp(.98rem,1.15vw,1.08rem); color: var(--pxs-ink); margin: 7px 0 6px; }
.pxs-typecard p { color: var(--pxs-grey); font-size: 13.5px; line-height: 1.5; }
/* the read-more only exists on mobile, where these cards make the section too long */
.pxs-tc-more { display: none; align-items: center; gap: 4px; margin-top: 8px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--pxs-mono); font-weight: 500; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--pxs-accent); }
.pxs-tc-more svg { width: 11px; height: 11px; transition: transform .35s var(--pxs-ease); }
.pxs-typecard.pxs-open .pxs-tc-more svg { transform: rotate(180deg); }

/* wide apartment image band */
.pxs-price-band { max-width: 1200px; border-radius: var(--pxs-r); overflow: hidden; margin: 0 auto clamp(28px,4vw,44px); box-shadow: 0 34px 90px -55px rgba(0,0,0,.5); }
.pxs-price-band img { width: 100%; height: auto; max-height: 460px; object-fit: cover; display: block; }

.pxs-pricing-lead { text-align: center; color: var(--pxs-grey); font-size: 14px; max-width: 620px; margin: 0 auto clamp(22px,3vw,32px); }

/* price cards (mockup): description eyebrow -> price -> orange size -> clean list -> orange button */
.pxs-tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2vw,26px); align-items: stretch; max-width: 1200px; margin: 0 auto; }
.pxs-tier { border-radius: var(--pxs-r); overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 26px 70px -50px rgba(0,0,0,.35); display: flex; flex-direction: column; height: 100%; transition: transform .25s var(--pxs-ease), box-shadow .25s; }
.pxs-tier:hover { transform: translateY(-6px); box-shadow: 0 44px 90px -50px rgba(0,0,0,.45); }
.pxs-tier-body { padding: clamp(26px,2.6vw,34px) clamp(24px,2.4vw,32px) clamp(26px,2.6vw,32px); text-align: left; display: flex; flex-direction: column; align-items: stretch; flex: 1; }
.pxs-tier-eb { font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pxs-faint); display: block; margin-bottom: 14px; }
.pxs-tier-pr { font-family: var(--pxs-sans); font-weight: 700; font-size: clamp(2.4rem,3.2vw,3rem); letter-spacing: -.02em; line-height: 1; color: var(--pxs-ink); }
.pxs-tier-sz { font-family: var(--pxs-sans); font-weight: 600; font-size: 15px; color: var(--pxs-accent); margin-top: 10px; }
/* The card is rounded, so the shot inside it has to be too — square corners
   inside a 20px radius read as a bug. Fixed height keeps the three cards'
   prices, lists and buttons on the same lines. */
.pxs-tier-shot { margin: clamp(16px,2vw,20px) 0 0; border-radius: 14px; overflow: hidden; }
.pxs-tier-shot img, .pxs-tier-shot video { width: 100%; height: clamp(150px,13vw,186px); object-fit: cover; display: block; border-radius: inherit; }
.pxs-tier-inc { list-style: none; width: 100%; margin: clamp(18px,2.2vw,24px) 0 clamp(22px,2.6vw,28px); display: flex; flex-direction: column; }
.pxs-tier-inc li { font-size: 15px; color: var(--pxs-ink2); padding: 13px 0; border-bottom: 1px solid rgba(0,0,0,.09); }
/* The count is the headline of the list, so the number carries the brand colour
   and a little more weight than the lines under it. */
.pxs-tier-inc li.pxs-tier-shots { color: var(--pxs-ink); font-weight: 600; }
.pxs-tier-inc li.pxs-tier-shots b { color: var(--pxs-accent); font-weight: 700; font-size: 1.12em; }
.pxs-tier-btn { margin-top: auto; align-self: stretch; }
/* The toggle exists for phones only; on a desktop column the list simply shows.
   Do NOT use display:contents on the drop: it discards the element's own box, so
   the max-height collapse below stops working and the list keeps its full height. */
.pxs .pxs-tier-more { display: none; }
/* A linked service card is still a card, not a blue link. */
.pxs-o3-card.is-linked { text-decoration: none; color: inherit; display: block; }
.pxs-o3-card.is-linked:hover .pxs-o3-more-pill { background: var(--pxs-accent); color: #fff; }
.pxs .pxs-tiers-cta { display: none; }

/* trust row: No VAT (icon, prominent) above delivery + travel */
.pxs-trust { display: flex; flex-direction: column; align-items: center; gap: clamp(16px,2.2vw,24px); margin-top: clamp(30px,4vw,46px); }
.pxs-novat { display: inline-flex; align-items: center; gap: 12px; background: rgba(255,93,41,.08); border: 1px solid rgba(255,93,41,.25); border-radius: 100px; padding: 12px 22px; }
.pxs-novat-ic { display: inline-flex; }
.pxs-novat-ic svg { width: 24px; height: 24px; color: var(--pxs-accent); }
.pxs-novat-txt { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.pxs-novat-txt b { font-family: var(--pxs-sans); font-weight: 700; font-size: 15px; color: var(--pxs-ink); }
.pxs-novat-txt small { font-size: 11.5px; color: var(--pxs-grey); margin-top: 2px; }
.pxs-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px,4vw,40px); }
.pxs-badge { display: inline-flex; align-items: center; gap: 10px; color: var(--pxs-ink2); font-size: 14px; }
.pxs-badge svg { width: 22px; height: 22px; color: var(--pxs-accent); flex: 0 0 auto; }
.pxs-badge b { color: var(--pxs-ink); font-weight: 600; }

/* what's included (light expandable cards) */
.pxs-included { margin-top: clamp(50px,7vw,90px); }
.pxs-inc-title { text-align: center; font-family: var(--pxs-sans); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.5rem,3vw,2.1rem); margin-bottom: clamp(24px,3vw,36px); }
.pxs-inc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: start; }
.pxs-inc { border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 26px 70px -52px rgba(0,0,0,.4); cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.pxs-inc:hover { border-color: rgba(255,93,41,.4); box-shadow: 0 34px 80px -50px rgba(0,0,0,.5); }
.pxs-inc-media { aspect-ratio: 16/10; overflow: hidden; background: #f0efec; }
.pxs-inc-media img { width: 100%; height: 100%; object-fit: cover; transition: .5s; }
.pxs-inc:hover .pxs-inc-media img { transform: scale(1.04); }
.pxs-inc-b { padding: 18px 20px; }
.pxs-inc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pxs-inc-h { font-family: var(--pxs-sans); font-weight: 600; font-size: 16.5px; color: var(--pxs-accent); display: block; }
.pxs-inc-recap { color: var(--pxs-grey); font-size: 13.5px; line-height: 1.5; display: block; margin-top: 4px; }
.pxs-inc-more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--pxs-grey); padding: 2px 0; }
.pxs-inc-more svg { width: 12px; height: 12px; transition: transform .35s; }
.pxs-inc-detail { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.22,.9,.25,1), opacity .4s ease; }
.pxs-inc-detail-in { padding-top: 14px; }
.pxs-inc-detail p { font-size: 13px; line-height: 1.6; color: var(--pxs-ink2); margin-bottom: 10px; }
.pxs-inc-detail p:last-child { margin-bottom: 0; }
.pxs-inc-detail p b { color: var(--pxs-ink); }
.pxs-inc.pxs-open .pxs-inc-detail { max-height: 460px; opacity: 1; }
.pxs-inc.pxs-open .pxs-inc-more svg { transform: rotate(180deg); }
@media (hover: hover) {
	.pxs-inc:hover .pxs-inc-detail { max-height: 460px; opacity: 1; }
	.pxs-inc:hover .pxs-inc-more svg { transform: rotate(180deg); }
}

/* =========================================================
   UPGRADES (light, media tiles + glass hover)
   ========================================================= */
/* fixed-size media tiles (like portfolio) with an Apple-glass hover reveal — no expand, no scale */
/* Its own warm band, with real air around it, so it reads as a separate section. */
.pxs.pxs-upgrades-section { padding: clamp(104px,11vw,180px) 0; }

.pxs-up-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,2.8vw,40px); align-items: stretch; max-width: 1200px; margin: 0 auto; }
/* no border: the dark outline around each tile was that 1px + the dark backing */
.pxs .pxs-up-lead {
	max-width: 60ch; margin: 14px auto 0; text-align: center;
	font-family: var(--pxs-body); font-size: clamp(15px, 1.4vw, 17.5px);
	line-height: 1.6; color: var(--pxs-grey); text-wrap: pretty;
}

/* The card. Picture on top, and the sentence that sells it underneath where it
   is always readable — the old tile hid that sentence behind a hover, so on a
   phone every card was a photograph with a name on it and no argument at all.
   The scrim it needed is gone with it, which is why the third card used to have
   an unreadable title over a bright wall. */
.pxs-upc {
	display: flex; flex-direction: column; text-align: left; width: 100%; padding: 0;
	background: var(--pxs-white); border: 1px solid rgba(13,13,13,.09); border-radius: 22px;
	overflow: hidden; cursor: pointer;
	box-shadow: 0 30px 70px -55px rgba(0,0,0,.5);
	transition: transform .45s var(--pxs-ease), box-shadow .45s var(--pxs-ease), border-color .3s;
}
.pxs-upc:hover { transform: translateY(-4px); border-color: rgba(13,13,13,.16); box-shadow: 0 44px 90px -50px rgba(0,0,0,.5); }
.pxs-upc:focus-visible { outline: 2px solid var(--pxs-accent); outline-offset: 3px; }

.pxs-upc-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #ece9e5; }
.pxs-upc-media img, .pxs-upc-media video {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .8s var(--pxs-ease);
}
.pxs-upc:hover .pxs-upc-media img, .pxs-upc:hover .pxs-upc-media video { transform: scale(1.04); }
.pxs-upc-tag {
	position: absolute; left: 12px; top: 12px; padding: 6px 11px; border-radius: 999px;
	background: rgba(13,13,13,.78); color: #fff;
	font-family: var(--pxs-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

.pxs-upc-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(18px, 1.8vw, 24px); }
.pxs-upc-t {
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(18px, 1.5vw, 21px); letter-spacing: -.024em; line-height: 1.2; color: var(--pxs-ink);
}
.pxs-upc-r {
	margin-top: 8px; font-family: var(--pxs-body); font-size: 14.5px; line-height: 1.55;
	color: var(--pxs-grey); text-wrap: pretty;
}
.pxs-upc-cta {
	display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px;
	font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; color: var(--pxs-accent);
}
.pxs-upc-cta svg { width: 15px; height: 15px; transition: transform .3s var(--pxs-ease); }
.pxs-upc:hover .pxs-upc-cta svg { transform: translateX(4px); }

/* The glass panel's own close button. It used to be styled with the Upgrades
   tile that has since become a card; only the booking step's photo cards open a
   glass panel now, so its base styling lives here with the panel. */
.pxs-up-x {
	position: absolute; z-index: 6; top: 12px; right: 12px; width: 34px; height: 34px;
	border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.14);
	color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
	transition: opacity .35s var(--pxs-ease), background .2s;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pxs-up-x:hover { background: rgba(255,255,255,.28); }

/* the liquid-glass panel: kicker → title → one-line promise → detail → note */
.pxs-up-glass { position: absolute; z-index: 4; inset: 0; display: flex; align-items: stretch; opacity: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,14,.28) 0%, rgba(10,10,14,.62) 55%, rgba(10,10,14,.82) 100%); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); transition: opacity .55s var(--pxs-ease); }
.pxs-up-glass::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); pointer-events: none; }
.pxs-up-glass-in { position: relative; width: 100%; padding: clamp(22px,2vw,30px); display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; text-align: left; overflow-y: auto; overscroll-behavior: contain; transform: translateY(16px); transition: transform .6s var(--pxs-ease); }
.pxs-up-glass-in > * { opacity: 0; transform: translateY(9px); transition: opacity .5s var(--pxs-ease), transform .5s var(--pxs-ease); }

.pxs-up-kicker { font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #ff8a5c; display: flex; align-items: center; gap: 9px; }
.pxs-up-kicker::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,138,92,.55), rgba(255,255,255,0)); }
.pxs-up-gtitle { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(21px,1.6vw,25px); letter-spacing: -.025em; line-height: 1.12; color: #fff; text-wrap: balance; }
.pxs-up-recap { color: #fff; font-size: clamp(15px,1.25vw,17px); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; }
.pxs-up-dtl { color: rgba(255,255,255,.76); font-size: 13.5px; line-height: 1.62; }
.pxs-up-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 3px; padding: 11px 13px; border-radius: 13px; background: rgba(255,93,41,.16); border: 1px solid rgba(255,93,41,.38); }
.pxs-up-note svg { width: 15px; height: 15px; color: #ff8a5c; flex: 0 0 auto; margin-top: 1px; }
.pxs-up-note span { color: #ffe9e0; font-size: 12px; line-height: 1.5; }

/* reveal (tap = .pxs-open, keyboard = :focus-within; desktop hover below) */
.pxs-open .pxs-up-glass, .pxs-up-glass:focus-within { opacity: 1; pointer-events: auto; }
.pxs-open .pxs-up-glass-in, .pxs-up-glass:focus-within .pxs-up-glass-in { transform: translateY(0); }
.pxs-open .pxs-up-glass-in > *, .pxs-up-glass:focus-within .pxs-up-glass-in > * { opacity: 1; transform: none; }
/* click-to-open only (so the video can pause while reading); stagger applies to the open state */
.pxs-open .pxs-up-glass-in > :nth-child(2) { transition-delay: .05s; }
.pxs-open .pxs-up-glass-in > :nth-child(3) { transition-delay: .1s; }
.pxs-open .pxs-up-glass-in > :nth-child(4) { transition-delay: .15s; }
.pxs-open .pxs-up-glass-in > :nth-child(5) { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
	.pxs-up-glass, .pxs-up-glass-in, .pxs-up-glass-in > * { transition: opacity .2s linear; transform: none; }
}
.pxs .pxs-up-foot { text-align: center; text-wrap: balance; color: var(--pxs-grey); font-size: 14.5px; line-height: 1.7; margin-inline: auto; margin-top: clamp(76px,8vw,104px); max-width: 560px; padding: 0 8px; }

/* ---------------------------------------------------------------------------
   Impact band.
   A dark band in an otherwise light page, because it is the one place making an
   argument from numbers rather than from pictures, and it should read as a
   change of register. The scrim is flat rather than a gradient: the figures run
   the full width, so any part of the photo can end up behind text. */
.pxs.pxs-impact { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 10vw, 150px) 0; }
.pxs.pxs-impact.has-bg { color: #fff; }
.pxs-impact-bg { position: absolute; inset: 0; z-index: -1; }
.pxs-impact-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs-impact-scrim { position: absolute; inset: 0; }
.pxs-impact-in { position: relative; z-index: 1; }

.pxs-impact-head { max-width: 46rem; }
.pxs.pxs-impact.has-bg .pxs-eyebrow { color: #ff8a5c; }
.pxs-impact-head h2 {
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(28px, 4.4vw, 54px); line-height: 1.02; letter-spacing: -.038em;
	margin: 0; text-wrap: balance; color: var(--pxs-ink);
}
/* Avada colours headings from the theme, so inheriting white off the section
   was never going to happen: the h2 came out near-black on a dark photograph
   while the figures beside it were white. Named here rather than inherited. */
.pxs.pxs-impact.has-bg .pxs-impact-head h2 { color: #fff; }
.pxs.pxs-impact.has-bg .pxs-impact-lead { color: rgba(255,255,255,.8); }
.pxs .pxs-impact-lead {
	margin: 18px 0 0; max-width: 56ch;
	font-family: var(--pxs-body); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.62;
	color: var(--pxs-grey); text-wrap: pretty;
}

.pxs-impact-grid {
	display: grid; gap: clamp(20px, 2.4vw, 34px);
	grid-template-columns: 1fr;
	margin-top: clamp(40px, 5.5vw, 76px);
}
@media (min-width: 620px)  { .pxs-impact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .pxs-impact-grid { grid-template-columns: repeat(4, 1fr); } }

/* Rules rather than boxes: four cards in a row on a photograph is a lot of
   furniture, and the figures carry themselves. */
.pxs-impact-stat { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.24); }
.pxs.pxs-impact:not(.has-bg) .pxs-impact-stat { border-top-color: rgba(13,13,13,.16); }
.pxs-impact-fig {
	display: block; font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(38px, 4.6vw, 58px); line-height: .95; letter-spacing: -.05em;
}
.pxs-impact-claim {
	display: block; margin-top: 12px;
	font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.3; letter-spacing: -.018em;
}
.pxs-impact-dtl {
	display: block; margin-top: 9px;
	font-family: var(--pxs-body); font-size: 13.5px; line-height: 1.55;
	color: rgba(255,255,255,.66);
}
.pxs.pxs-impact:not(.has-bg) .pxs-impact-dtl { color: var(--pxs-grey); }
.pxs-impact-src {
	display: block; margin-top: 12px;
	font-family: var(--pxs-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
	color: rgba(255,255,255,.42);
}
.pxs.pxs-impact:not(.has-bg) .pxs-impact-src { color: var(--pxs-faint); }

.pxs-impact-foot {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 22px; margin-top: clamp(34px, 4.5vw, 58px);
	padding-top: clamp(20px, 2.6vw, 30px); border-top: 1px solid rgba(255,255,255,.16);
}
.pxs.pxs-impact:not(.has-bg) .pxs-impact-foot { border-top-color: rgba(13,13,13,.12); }
.pxs .pxs-impact-note {
	margin: 0; max-width: 72ch; flex: 1 1 460px;
	font-family: var(--pxs-body); font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,.46);
}
.pxs.pxs-impact:not(.has-bg) .pxs-impact-note { color: var(--pxs-faint); }

/* ---- upgrade popup ---- */
.pxs-up-modal .pxs-modal-box { max-width: 600px; }
.pxs-up-modal .pxs-modal-media { aspect-ratio: 4/3; background: #101012; }
.pxs-up-modal .pxs-modal-c { text-align: left; padding: 24px clamp(22px,3vw,32px) clamp(26px,3vw,32px); }
.pxs-upm-kicker { display: flex; align-items: center; gap: 9px; font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pxs-accent); margin-bottom: 9px; }
.pxs-upm-kicker::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,93,41,.4), rgba(0,0,0,0)); }
.pxs-upm-title { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(1.4rem,3vw,1.75rem); letter-spacing: -.025em; line-height: 1.12; color: var(--pxs-ink); margin-bottom: 10px; text-wrap: balance; }
.pxs-up-modal .pxs-upm-recap { color: var(--pxs-ink); font-size: 16px; font-weight: 600; line-height: 1.45; margin-bottom: 10px; }
.pxs-up-modal .pxs-upm-dtl { color: var(--pxs-grey); font-size: 14.5px; line-height: 1.65; margin-bottom: 14px; }
.pxs-up-modal .pxs-up-note { background: rgba(255,93,41,.08); border-color: rgba(255,93,41,.3); margin-bottom: 18px; }
.pxs-up-modal .pxs-up-note svg { color: var(--pxs-accent); }
.pxs-up-modal .pxs-up-note span { color: var(--pxs-ink2); font-size: 12.5px; }
.pxs-up-modal .pxs-btn { width: 100%; justify-content: center; }
@media (max-width: 560px) {
	.pxs-up-modal .pxs-modal-media { aspect-ratio: 1/1; }
}
/* mobile: shorter, landscape-ish tiles so they don't eat vertical space */
/* The recap sits UNDER the title on the face of the square: the card has to say
   what the upgrade does, not just name it, or the grid reads as three photos.
   The media and the shade are absolutely positioned, so the card becomes a
   bottom-aligned flex column and the two text elements stack as flow items.
   Positioning the recap absolutely as well simply printed it over the title. */
.pxs-up { display: flex; flex-direction: column; justify-content: flex-end; }
.pxs-up .pxs-up-title { position: static; }
.pxs-up-recap {
	position: static; z-index: 1;
	padding: 4px clamp(18px,2vw,24px) clamp(16px,1.8vw,22px);
	color: rgba(255,255,255,.9); font-size: 13.5px; line-height: 1.4;
	text-shadow: 0 1px 12px rgba(0,0,0,.55); pointer-events: none;
	/* Collapsed until hover, so a resting card stays as clean as it was. */
	max-height: 0; opacity: 0; overflow: hidden;
	transition: max-height .38s var(--pxs-ease), opacity .3s var(--pxs-ease), padding .38s var(--pxs-ease);
}
.pxs-up:hover .pxs-up-recap, .pxs-up:focus-visible .pxs-up-recap { max-height: 6em; opacity: 1; }
.pxs-up-more { text-align: center; margin-top: clamp(18px,2.4vw,26px); }
.pxs-up-more .pxs-btn { display: inline-flex; align-items: center; gap: 8px; }
.pxs-up-more svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
	/* Keep the card exactly as it was: .pxs-up-media is absolutely positioned, so
	   the card's own aspect-ratio is what gives it height. Removing it collapsed
	   all three to strips. Only the recap behaviour changes here, because there is
	   no hover on a phone to reveal it. */
	.pxs-up { aspect-ratio: 4/3; }
	/* No hover on a phone, so the recap is simply always open. */
	.pxs-up-recap { max-height: 6em; opacity: 1; font-size: 12.5px; }
}

/* =========================================================
   TRUST (stat band + client logos) — own section, own shortcode
   ========================================================= */
.pxs.pxs-trust-section.pxs-sp-tight { padding: clamp(40px,4.5vw,70px) 0; }
.pxs.pxs-trust-section.pxs-sp-normal { padding: clamp(60px,6.5vw,110px) 0; }
.pxs-trust-section .pxs-stats:last-child, .pxs-trust-section .pxs-logos:last-child { margin-bottom: 0; }

/* =========================================================
   REVIEWS
   ========================================================= */
.pxs-stats { display: flex; justify-content: center; gap: clamp(24px,6vw,90px); flex-wrap: wrap; margin-bottom: clamp(30px,4vw,52px); }
.pxs-stat b { font-family: var(--pxs-sans); font-weight: 700; font-size: clamp(2rem,4vw,3rem); display: block; letter-spacing: -.03em; }
.pxs-stat span { font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--pxs-faint); }
/* client logos strip */
.pxs-logos { text-align: center; margin: clamp(6px,2vw,20px) auto clamp(30px,4vw,48px); max-width: 1100px; --pxs-logo-n: var(--pxs-logo-set, 4); }
.pxs-logos-t { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(17px,2.2vw,22px); letter-spacing: -.015em; text-transform: none; color: var(--pxs-ink); margin-bottom: 28px; }
.pxs-logos-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(22px,4vw,54px); }

/* Sliding logo row. The track is exactly as wide as the viewport it sits in and
   each logo takes 1/n of it, so one step is translateX(-100% / n) and the whole
   thing survives a resize without measuring anything. The list is cloned once by
   the JS, so stepping past the last logo lands on a pixel-identical copy of the
   first and the snap back to zero is invisible. */
.pxs-logos-vp { overflow: hidden; }
.pxs-logos-track { display: flex; align-items: center; transform: translateX(calc(var(--pxs-logo-i, 0) * -100% / var(--pxs-logo-n))); transition: transform .85s var(--pxs-ease); }
.pxs-logos-track.pxs-nojump { transition: none; }
.pxs-logos-track.pxs-logos-static { flex-wrap: wrap; justify-content: center; transform: none; row-gap: clamp(18px,3vw,30px); }
.pxs-logos-track .pxs-logo { flex: 0 0 calc(100% / var(--pxs-logo-n)); justify-content: center; padding: 0 clamp(10px,2vw,26px); }
.pxs-logo { display: inline-flex; align-items: center; }
.pxs-logo img { max-height: var(--pxs-logo-h, 64px); width: auto; max-width: 100%; object-fit: contain; opacity: 1; }
@media (max-width: 900px) { .pxs-logos { --pxs-logo-n: 3; } }
@media (max-width: 560px) { .pxs-logos { --pxs-logo-n: 2; } .pxs-logo img { max-height: calc(var(--pxs-logo-h, 64px) * .8); } }
.pxs-rev-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.pxs-rev { border-radius: 20px; padding: 26px; text-align: left; }
.pxs-rev-q { font-size: 15px; color: var(--pxs-ink2); line-height: 1.6; margin-bottom: 16px; }
.pxs-rev-who { font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--pxs-faint); }
.pxs-rev.pxs-ph { border: 1px dashed rgba(0,0,0,.18); background: rgba(255,255,255,.4); }
.pxs-rev.pxs-ph .pxs-rev-q { color: var(--pxs-faint); font-style: italic; }

/* =========================================================
   QUOTE
   ========================================================= */
.pxs-quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,60px); align-items: center; }
.pxs-quote-section h2 { font-size: clamp(2rem,3.8vw,2.9rem); margin-bottom: 14px; }
.pxs-lede { color: var(--pxs-grey); font-size: 16px; margin-bottom: 22px; }
.pxs-qlist { list-style: none; } .pxs-qlist li { display: flex; gap: 11px; padding: 8px 0; color: var(--pxs-ink2); font-size: 15px; }
.pxs-qlist li svg { width: 19px; height: 19px; color: var(--pxs-accent); flex: 0 0 auto; }
.pxs-qf { border-radius: var(--pxs-r); padding: 30px; text-align: left; }
.pxs-qf label { display: block; font-size: 12px; color: var(--pxs-grey); margin: 14px 0 6px; font-family: var(--pxs-mono); text-transform: uppercase; letter-spacing: .05em; }
.pxs-qf input, .pxs-qf select, .pxs-qf textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.7); color: var(--pxs-ink); font-family: var(--pxs-body); font-size: 15px; }
.pxs-qf textarea { min-height: 80px; resize: vertical; }
.pxs-qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pxs-consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 16px; font-size: 12px; color: var(--pxs-grey); font-family: var(--pxs-body); text-transform: none; letter-spacing: 0; }
.pxs-consent input { width: auto; margin-top: 3px; }
.pxs-qf button { width: 100%; margin-top: 18px; }
.pxs-qf-ok { display: none; background: rgba(255,93,41,.1); border: 1px solid var(--pxs-accent); color: #a8371a; border-radius: 12px; padding: 14px; font-size: 14px; margin-top: 16px; }

/* =========================================================
   FAQ
   ========================================================= */
.pxs-faqwrap { max-width: 820px; margin: 0 auto; text-align: left; }
.pxs-faqwrap details { border-radius: 16px; margin-bottom: 10px; padding: 0 22px; }
.pxs-faqwrap summary { list-style: none; cursor: pointer; padding: 19px 40px 19px 0; position: relative; font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(16px,1.5vw,18px); }
.pxs-faqwrap summary::-webkit-details-marker { display: none; }
.pxs-faqwrap summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--pxs-accent); }
.pxs-faqwrap details[open] summary::after { content: "\2013"; }
.pxs-faq-a { padding: 0 20px 20px 0; color: var(--pxs-grey); font-size: 15px; }

/* =========================================================
   RESPONSIVE (new sections)
   ========================================================= */
@media (max-width: 920px) {
	.pxs-score { grid-template-columns: 1fr; }
	.pxs-offer-grid { grid-template-columns: 1fr; }
	.pxs-offer3 { grid-template-columns: 1fr; }
	.pxs-typecards { grid-template-columns: 1fr; max-width: 460px; }
	.pxs-pf-grid { grid-template-columns: 1fr; }
	.pxs-tiers { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
	.pxs-inc-grid { grid-template-columns: 1fr; }
	.pxs-up-grid { grid-template-columns: 1fr; }
	.pxs-rev-grid { grid-template-columns: 1fr; }
	.pxs-quote-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.pxs-qf-row { grid-template-columns: 1fr; }
	.pxs-obody { flex-direction: column; align-items: flex-start; }
	.pxs-obody .pxs-osmall { width: 100%; justify-content: center; }
	.pxs-tiers { grid-template-columns: 1fr; }
}

/* =========================================================
   LISTING READ (animated score)
   ========================================================= */
@keyframes pxs-pop {
	from { opacity: 0; transform: translateY(12px) scale(.96); }
	to   { opacity: 1; transform: none; }
}
.pxs-read-section {
	background:
		radial-gradient(1100px 700px at 12% -5%, #fff 0%, transparent 55%),
		radial-gradient(900px 700px at 100% 8%, #f6ede9 0%, transparent 50%),
		linear-gradient(180deg, var(--pxs-bg), var(--pxs-bg2));
}

.pxs-read-2col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,80px); align-items: center; margin-top: clamp(30px,4vw,52px); }
.pxs-read-visual { position: relative; }
.pxs-read-stage { position: relative; max-width: 520px; margin: 0 auto; transition: height .6s var(--pxs-ease); }
.pxs-read-stage[data-multi="1"] .pxs-read-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.pxs-read-stage[data-multi="1"] .pxs-read-slide.is-active { opacity: 1; pointer-events: auto; }

.pxs-read-frame { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4/3; }
.pxs-read-frame img, .pxs-read-frame .pxs-pf-empty { width: 100%; height: 100%; object-fit: cover; }
.pxs-read-cap {
	position: absolute; top: 14px; left: 14px; z-index: 2;
	font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
	color: #fff; padding: 7px 13px; border-radius: 100px;
	background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.25);
	opacity: 0; transform: translateY(-6px);
}
.pxs-read-stage.pxs-play .is-active .pxs-read-cap,
.pxs-read-stage.pxs-play .pxs-read-slide:only-child .pxs-read-cap { animation: pxs-pop .5s var(--pxs-ease) .25s both; }

/* score card (ring + band + points) overlapping the frame bottom */
.pxs-read-card { position: relative; z-index: 3; margin: -46px auto 0; width: min(94%, 460px); border-radius: 22px; padding: 20px 22px; text-align: left; }
.pxs-read-scorehead { display: flex; align-items: center; gap: 18px; }
.pxs-read-ring { position: relative; width: 88px; height: 88px; flex: 0 0 auto; }
.pxs-read-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pxs-ring-track { fill: none; stroke: rgba(0,0,0,.10); stroke-width: 9; }
.pxs-ring-prog { fill: none; stroke: var(--pxs-ring); stroke-width: 9; stroke-linecap: round; transition: stroke .3s; }
.pxs-read-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pxs-read-num b { font-family: var(--pxs-sans); font-weight: 700; font-size: 26px; line-height: 1; color: var(--pxs-ink); font-style: normal; }
.pxs-read-num span { font-family: var(--pxs-mono); font-size: 10px; color: var(--pxs-faint); margin-top: 2px; }
.pxs-read-bandlabel { display: block; font-family: var(--pxs-sans); font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--pxs-ring); transition: color .3s; }
.pxs-read-band span { color: var(--pxs-grey); font-size: 12px; }

.pxs-read-points { list-style: none; margin-top: 16px; padding-top: 4px; border-top: 1px solid rgba(0,0,0,.08); }
.pxs-read-point { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 13px; color: var(--pxs-ink2); opacity: 0; transform: translateY(8px); transition: opacity .45s var(--pxs-ease), transform .45s var(--pxs-ease); }
.pxs-read-point:last-child { border-bottom: 0; }
.pxs-read-point.show { opacity: 1; transform: none; }
.pxs-read-point b { font-family: var(--pxs-mono); font-size: 11px; font-weight: 600; color: var(--pxs-accent); flex: 0 0 auto; margin-top: 1px; }

.pxs-read-dots { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.pxs-read-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,.18); transition: .3s; }
.pxs-read-dots i.on { background: var(--pxs-accent); width: 22px; border-radius: 100px; }

.pxs-read-side { text-align: center; }
.pxs-read-side h3 { font-family: var(--pxs-sans); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.4rem,2.6vw,1.9rem); margin-bottom: 10px; }
.pxs-read-side p { color: var(--pxs-grey); font-size: 16px; line-height: 1.6; margin: 0 auto 22px; max-width: 440px; }
.pxs-read-side .pxs-score-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 460px; margin: 0 auto; justify-content: center; }
.pxs-read-side .pxs-score-form input { flex: 1; min-width: 220px; padding: 15px 20px; border-radius: 100px; border: 1px solid rgba(0,0,0,.14); background: rgba(255,255,255,.8); color: var(--pxs-ink); font-family: var(--pxs-body); font-size: 15px; }
.pxs-read-side .pxs-score-form input::placeholder { color: var(--pxs-faint); }
.pxs-read-note { color: var(--pxs-faint); font-size: 12.5px; margin-top: 14px; }

@media (max-width: 860px) {
	.pxs-read-2col { grid-template-columns: 1fr; gap: clamp(30px,8vw,48px); }
	.pxs-read-stage { max-width: 440px; }
}
@media (max-width: 560px) {
	.pxs-read-frame { aspect-ratio: 3/2; }
	.pxs-read-ring { width: 78px; height: 78px; }
	.pxs-read-num b { font-size: 22px; }
}

/* =========================================================
   BOOKING / QUOTE WIZARD
   ========================================================= */
.pxs-booking {
	background:
		radial-gradient(1100px 700px at 12% -5%, #fff 0%, transparent 55%),
		radial-gradient(900px 700px at 100% 8%, #f6ede9 0%, transparent 50%),
		linear-gradient(180deg, var(--pxs-bg), var(--pxs-bg2));
	padding: clamp(56px,8vw,120px) 0;
	position: relative;
}
.pxs-bk-anchor { position: absolute; top: -90px; }

.pxs-bk-head { text-align: center; max-width: 680px; margin: 0 auto; }
.pxs-bk-head h2 { font-size: clamp(2rem,4.6vw,3rem); }
.pxs-bk-intro { color: var(--pxs-grey); margin-top: 12px; font-size: clamp(15px,1.5vw,17px); }

.pxs-bk-progress { max-width: 760px; margin: clamp(24px,4vw,40px) auto 14px; display: flex; align-items: center; gap: 14px; }
.pxs-bk-bar { flex: 1; height: 6px; border-radius: 100px; background: rgba(0,0,0,.09); overflow: hidden; }
.pxs-bk-bar i { display: block; height: 100%; width: 50%; border-radius: 100px; background: var(--pxs-accent); transition: width .5s var(--pxs-ease); }
.pxs-bk-count { font-family: var(--pxs-mono); font-size: 12px; color: var(--pxs-grey); white-space: nowrap; }

.pxs-bk-panel { position: relative; max-width: 760px; margin: 0 auto; border-radius: 26px; padding: clamp(22px,3.5vw,38px); }

.pxs-bk-step { display: none; }
.pxs-bk-step.is-active { display: block; animation: pxs-bk-in .45s var(--pxs-ease) both; }
@keyframes pxs-bk-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.pxs-bk-steptitle { font-family: var(--pxs-sans); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.3rem,2.6vw,1.8rem); }
.pxs-bk-subtitle { font-family: var(--pxs-sans); font-weight: 600; font-size: 1.05rem; margin-top: 24px; }
.pxs-bk-note { color: var(--pxs-faint); font-size: 13px; margin-top: 18px; }
.pxs-bk-lede { color: var(--pxs-grey); font-size: 15px; margin-top: 6px; }

/* size cards */
.pxs-bk-cards-lg { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 16px 0 6px; }
.pxs-bk-card { position: relative; display: flex; flex-direction: column; text-align: left; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.08); cursor: pointer; transition: transform .2s var(--pxs-ease), box-shadow .2s, border-color .2s; }
.pxs-bk-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.4); }
.pxs-bk-card-img { display: block; position: relative; aspect-ratio: 4/3; background: #f0efec; overflow: hidden; }
.pxs-bk-card-img img, .pxs-bk-card-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The plan inside a booking card is a small frame, so the labels have to shrink
   with it or they cover the rooms they are naming. */
.pxs-bk-card-plan { position: relative; }
.pxs .pxs-fp-heromark-sm { padding: 4px 8px; border-radius: 8px; gap: 0; }
.pxs .pxs-fp-heromark-sm b { font-size: 10px; }
.pxs .pxs-fp-heromark-sm i { font-size: 9.5px; }
.pxs-bk-ico { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--pxs-accent); }
.pxs-bk-ico svg { width: 40px; height: 40px; }
.pxs-bk-card-main { padding: 14px 16px 2px; }
.pxs-bk-card-main b { font-family: var(--pxs-sans); font-weight: 600; font-size: 17px; display: block; }
.pxs-bk-card-sub { color: var(--pxs-grey); font-size: 12.5px; }
.pxs-bk-card-price { padding: 4px 16px 14px; margin-top: auto; font-family: var(--pxs-mono); font-size: 13px; color: var(--pxs-accent); font-weight: 500; }
.pxs-bk-tick { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--pxs-accent); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: .2s var(--pxs-ease); }
.pxs-bk-tick svg { width: 15px; height: 15px; }
.pxs-bk-card.is-sel { border-color: var(--pxs-accent); box-shadow: 0 0 0 2px var(--pxs-accent); }
.pxs-bk-card.is-sel .pxs-bk-tick { opacity: 1; transform: none; }

/* chips (type / method) */
.pxs-bk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.pxs-bk-chip { position: relative; text-align: left; padding: 11px 17px; border-radius: 14px; background: #fff; border: 1px solid rgba(0,0,0,.1); cursor: pointer; transition: .18s; }
.pxs-bk-chip b { display: block; font-family: var(--pxs-sans); font-weight: 600; font-size: 14.5px; }
.pxs-bk-chip span { color: var(--pxs-grey); font-size: 12px; }
.pxs-bk-chip:hover { border-color: rgba(0,0,0,.25); }
.pxs-bk-chip.is-sel { border-color: var(--pxs-accent); box-shadow: 0 0 0 1px var(--pxs-accent); background: rgba(255,93,41,.06); }

/* Type options. Free-flowing chips sized themselves to their own text, so four
   options landed in a ragged two-and-two; a grid gives them one shared width. */
.pxs-bk-typegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 14px 0 4px; }
.pxs-bk-typegrid .pxs-bk-chip { display: flex; flex-direction: column; gap: 3px; padding: 14px 42px 14px 16px; border-radius: 16px; }
.pxs-bk-typegrid .pxs-bk-chip b { font-size: 15px; letter-spacing: -.01em; }
.pxs-bk-typegrid .pxs-bk-chip > span { line-height: 1.35; }

/* The platform names do more work than the description: someone who lists on
   Wunderflats recognises their own row before they have read a word of it. */
.pxs-bk-plats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.pxs-bk-plats em {
	font-style: normal; font-family: var(--pxs-mono); font-size: 9.5px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--pxs-grey); background: rgba(13,13,13,.055);
	border-radius: 5px; padding: 3px 6px; white-space: nowrap; transition: .18s;
}
.pxs-bk-chip.is-sel .pxs-bk-plats em { background: rgba(255,93,41,.13); color: var(--pxs-accent); }
.pxs-bk-typegrid .pxs-bk-tick { top: 12px; right: 12px; width: 22px; height: 22px; }
.pxs-bk-typegrid .pxs-bk-tick svg { width: 13px; height: 13px; }
.pxs-bk-chip.is-sel .pxs-bk-tick { opacity: 1; transform: none; }

/* contact form */
.pxs-bk-form { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.pxs-bk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pxs-bk-form label { display: block; font-family: var(--pxs-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--pxs-grey); }
.pxs-bk-in { width: 100%; margin-top: 6px; padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.85); font-family: var(--pxs-body); font-size: 15px; color: var(--pxs-ink); }
.pxs-bk-in.pxs-bk-err { border-color: #ef4444; }
.pxs-bk-help { color: var(--pxs-faint); font-size: 12px; margin-top: 2px; text-transform: none; letter-spacing: 0; font-family: var(--pxs-body); }
.pxs-bk-consent { display: flex !important; gap: 11px; align-items: flex-start; font-family: var(--pxs-body) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--pxs-grey); font-size: 12.5px; margin-top: 10px; cursor: pointer; }
/* The only thing between a finished form and a sent request, and it was a 13px
   target. The label is clickable too, so the real hit area is the sentence. */
.pxs-bk-consent input { width: 21px; height: 21px; flex: 0 0 auto; margin: 0; accent-color: var(--pxs-accent); cursor: pointer; }
.pxs-bk-form label em { font-style: normal; color: var(--pxs-faint); text-transform: none; letter-spacing: 0; }

/* footer: back / estimate / next */
.pxs-bk-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.08); }
.pxs-bk-back { background: transparent; border: 1px solid rgba(0,0,0,.16); color: var(--pxs-ink); border-radius: 100px; padding: 12px 22px; font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; cursor: pointer; transition: .2s; }
.pxs-bk-back:hover { border-color: var(--pxs-ink); }
.pxs-bk-back[disabled] { opacity: 0; pointer-events: none; }
.pxs-bk-est { text-align: center; flex: 1; min-width: 0; }
.pxs-bk-est-txt { font-family: var(--pxs-sans); font-weight: 600; color: var(--pxs-grey); font-size: 14px; }
.pxs-bk-est.has .pxs-bk-est-txt { color: var(--pxs-ink); }
.pxs-bk-est.has .pxs-bk-est-txt b { color: var(--pxs-accent); font-size: 20px; }
.pxs-bk-next { background: var(--pxs-accent); color: #fff; border: 0; border-radius: 100px; padding: 13px 27px; font-family: var(--pxs-sans); font-weight: 600; font-size: 15px; cursor: pointer; box-shadow: 0 10px 26px -10px rgba(255,93,41,.6); transition: transform .2s var(--pxs-ease), opacity .2s; }
.pxs-bk-next:hover { transform: translateY(-2px); }
.pxs-bk-next[disabled] { opacity: .4; pointer-events: none; box-shadow: none; }

/* success */
/* Sent.
   The panel used to collapse to the height of two lines the instant the request
   went out, which snaps the page and reads as something breaking rather than
   something succeeding. Script pins the panel's height first; this fills it. */
.pxs-bk-success { display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px 10px; }
.pxs-bk-success-card {
	width: min(430px, 100%); padding: 34px 28px 32px; border-radius: 28px;
	background: rgba(255,255,255,.55);
	backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
	border: 1px solid rgba(255,255,255,.7);
	box-shadow: 0 30px 70px -34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.8);
	animation: pxs-ok-rise .62s cubic-bezier(.2,.9,.25,1.02) both;
}
.pxs-bk-success-ico {
	position: relative; width: 76px; height: 76px; border-radius: 50%;
	color: var(--pxs-accent); display: flex; align-items: center; justify-content: center;
	margin: 0 auto 18px;
}
/* A single soft bloom behind the mark, timed to land as the tick finishes. */
.pxs-bk-success-ico::before {
	content: ''; position: absolute; inset: -6px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255,93,41,.28), transparent 68%);
	animation: pxs-ok-bloom .9s .34s ease-out both;
}
.pxs-bk-success-ico svg { position: relative; width: 76px; height: 76px; }
.pxs-bk-ok-c { stroke-dasharray: 145; stroke-dashoffset: 145; opacity: .38; animation: pxs-ok-draw .72s .12s cubic-bezier(.5,0,.2,1) forwards; }
.pxs-bk-ok-k { stroke-dasharray: 34; stroke-dashoffset: 34; stroke-width: 3.4; animation: pxs-ok-draw .38s .52s cubic-bezier(.5,0,.2,1) forwards; }
.pxs-bk-success h3 { font-family: var(--pxs-sans); font-weight: 600; font-size: 1.5rem; margin-bottom: 8px; letter-spacing: -.02em; animation: pxs-ok-rise .55s .2s cubic-bezier(.2,.9,.25,1) both; }
.pxs-bk-success p { color: var(--pxs-grey); max-width: 440px; margin: 0 auto; animation: pxs-ok-rise .55s .3s cubic-bezier(.2,.9,.25,1) both; }
@keyframes pxs-ok-rise { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes pxs-ok-draw { to { stroke-dashoffset: 0 } }

/* Did not send.
   Borrows the success card's shell so a failure still looks like part of the
   site rather than a browser error, but drops the tick and the bloom: there is
   nothing here to celebrate. The two ways out are the point of the card. */
.pxs-bk-failed { display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px 10px; }
.pxs-bk-failed h3 { font-family: var(--pxs-sans); font-weight: 600; font-size: 1.5rem; margin-bottom: 8px; letter-spacing: -.02em; }
.pxs-bk-failed p { color: var(--pxs-grey); max-width: 440px; margin: 0 auto; }
.pxs-bk-failed-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px !important; }
.pxs-bk-failed-btn {
	display: inline-block; padding: 12px 20px; border-radius: 999px;
	font-family: var(--pxs-sans); font-weight: 600; font-size: .95rem; text-decoration: none;
	color: #fff; background: var(--pxs-accent);
	border: 1px solid rgba(0,0,0,.06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.pxs-bk-failed-btn + .pxs-bk-failed-btn { color: var(--pxs-ink); background: rgba(255,255,255,.72); }
.pxs-bk-failed-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -14px rgba(0,0,0,.5); }
@keyframes pxs-ok-bloom { 0% { opacity: 0; transform: scale(.6) } 55% { opacity: 1; transform: scale(1.06) } 100% { opacity: .5; transform: scale(1) } }

/* The steps leave before the card arrives, rather than being cut. */
.pxs-bk-steps.is-leaving, .pxs-bk-foot.is-leaving { opacity: 0; transform: translateY(-10px); transition: opacity .28s ease, transform .28s ease; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.pxs-bk-success-card, .pxs-bk-success h3, .pxs-bk-success p, .pxs-bk-success-ico::before { animation: none; }
	.pxs-bk-ok-c, .pxs-bk-ok-k { stroke-dashoffset: 0; animation: none; }
	.pxs-bk-steps.is-leaving, .pxs-bk-foot.is-leaving { transition: none; }
}

/* bottom step nav */
.pxs-bk-nav { display: flex; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.pxs-bk-navi { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.62); border: 1px solid rgba(0,0,0,.08); border-radius: 100px; padding: 8px 15px 8px 11px; cursor: pointer; color: var(--pxs-grey); transition: .2s; }
.pxs-bk-navi-ic { display: flex; } .pxs-bk-navi-ic svg { width: 18px; height: 18px; }
.pxs-bk-navi-lb { font-family: var(--pxs-sans); font-weight: 600; font-size: 13px; }
.pxs-bk-navi:hover { border-color: rgba(0,0,0,.2); }
.pxs-bk-navi.is-done { color: var(--pxs-accent); }
.pxs-bk-navi.is-active { background: var(--pxs-ink); color: #fff; border-color: var(--pxs-ink); }
.pxs-bk-navi[disabled] { opacity: .45; pointer-events: none; }

.pxs-bk-est-note { display: block; font-family: var(--pxs-body); font-weight: 400; font-size: 11px; color: var(--pxs-faint); margin-top: 2px; }
.pxs-bk-cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 6px; }
/* An extra is a card plus its own way in to the long version. The wrapper is
   the grid cell so the card and its button move together. */
.pxs-bk-xwrap { display: flex; flex-direction: column; }
.pxs-bk-xwrap .pxs-bk-card { flex: 1 1 auto; }
.pxs .pxs-bk-morebtn {
	margin-top: 8px; padding: 12px 12px; min-height: 42px; border: 1px solid rgba(0,0,0,.1); border-radius: 12px;
	background: #fff; color: var(--pxs-ink); cursor: pointer;
	display: flex; align-items: center; justify-content: center; gap: 6px;
	font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
	transition: border-color .18s, color .18s, background .18s;
}
.pxs-bk-morebtn svg { width: 13px; height: 13px; }
.pxs .pxs-bk-morebtn:hover { border-color: var(--pxs-accent); color: var(--pxs-accent); }
.pxs .pxs-bk-morebtn:focus-visible { outline: 2px solid var(--pxs-accent); outline-offset: 2px; }
.pxs-bk-card-price em { display: block; font-style: normal; color: var(--pxs-faint); }

/* The read-more, over the wizard rather than instead of it. */
/* Above Avada's sticky header, which sits at 2005 and was painting its side
   column straight over this dialog on the live site. Still below .pxs-lb
   (99999) so a lightbox opened from inside the overlay stays on top of it. */
.pxs-bk-more { position: fixed; inset: 0; z-index: 99000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pxs-bk-more[hidden] { display: none; }
.pxs-bk-more-bg { position: absolute; inset: 0; background: rgba(10,10,10,.55); backdrop-filter: blur(6px); animation: pxs-more-fade .25s ease both; }
.pxs-bk-more-box {
	position: relative; z-index: 1; display: flex; flex-direction: column;
	/* 90% of the viewport, not a fixed column: this overlay now carries a plan
	   viewer, and a plan is the one thing that is worth the whole screen. */
	width: 90vw; height: 90vh; max-width: 1500px; max-height: 90vh;
	background: var(--pxs-bg, #f7f6f4); color: var(--pxs-ink);
	border-radius: 22px; overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0,0,0,.6);
	animation: pxs-more-in .32s var(--pxs-ease) both;
}
@keyframes pxs-more-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pxs-more-in { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }
.pxs .pxs-bk-more-x {
	position: absolute; z-index: 3; top: 14px; right: 14px; width: 38px; height: 38px;
	padding: 0; border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255,255,255,.92); color: var(--pxs-ink);
	box-shadow: 0 6px 20px -8px rgba(0,0,0,.5);
	display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.pxs-bk-more-x svg { width: 17px; height: 17px; }
.pxs .pxs-bk-more-x:hover { background: #fff; }
.pxs-bk-more-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 30px 30px 8px; }
.pxs-bk-more-head { padding-right: 44px; }
.pxs-bk-more-head h3 { font-family: var(--pxs-sans); font-weight: 600; letter-spacing: -.025em; font-size: clamp(1.4rem, 3vw, 2rem); margin-top: 6px; }
.pxs-bk-more-head p { color: var(--pxs-grey); font-size: 15px; line-height: 1.55; margin-top: 10px; }
.pxs-bk-more-head h3, .pxs-bk-more-scroll h4 { text-transform: none; }
.pxs-bk-more-scroll h4 { font-family: var(--pxs-sans); font-weight: 600; font-size: 1.02rem; letter-spacing: -.015em; margin: 26px 0 12px; }
.pxs-bk-more-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pxs-bk-more-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.pxs-bk-more-list svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; color: var(--pxs-accent); }
.pxs-bk-more-prices { display: grid; gap: 8px; }
.pxs-bk-more-price {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 12px 15px;
	transition: border-color .2s, box-shadow .2s;
}
/* The row that is actually this visitor's, marked rather than explained. */
.pxs-bk-more-price.is-yours { border-color: var(--pxs-accent); box-shadow: 0 0 0 1px var(--pxs-accent); }
.pxs-bk-more-price-l b { display: block; font-family: var(--pxs-sans); font-weight: 600; font-size: 15px; }
.pxs-bk-more-price-l span { color: var(--pxs-grey); font-size: 12.5px; }
.pxs-bk-more-price-n { font-family: var(--pxs-mono); font-size: 15px; color: var(--pxs-accent); font-weight: 500; white-space: nowrap; }
.pxs-bk-more-yours { margin-top: 10px; font-family: var(--pxs-mono); font-size: 12px; color: var(--pxs-accent); letter-spacing: .03em; }
.pxs-bk-more-note { margin-top: 10px; color: var(--pxs-faint); font-size: 12.5px; line-height: 1.5; }
.pxs-bk-more-foot {
	flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
	padding: 16px 30px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.72); backdrop-filter: blur(10px);
}
.pxs .pxs-bk-more-add { flex: 0 0 auto; }
.pxs .pxs-bk-more-add.is-added { background: #fff; color: var(--pxs-ink); box-shadow: inset 0 0 0 1px var(--pxs-accent); }
.pxs .pxs-bk-more-back { border: 0; background: none; color: var(--pxs-grey); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.pxs .pxs-bk-more-back:hover { color: var(--pxs-ink); }

@media (max-width: 640px) {
	/* Full screen: at this width a centred dialog is a worse version of a page. */
	.pxs-bk-more { padding: 0; }
	.pxs-bk-more-box { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; }
	.pxs-bk-more-scroll { padding: 22px 18px 8px; }
	.pxs-bk-more-foot { padding: 13px 18px calc(13px + env(safe-area-inset-bottom)); gap: 10px; }
	.pxs .pxs-bk-morebtn { padding: 12px 10px; font-size: 10px; }
	.pxs-bk-more-head h3 { font-size: 1.35rem; }
}
.pxs-bk-card-price em { font-style: normal; color: var(--pxs-faint); }

/* `.pxs-bk-note` sets display, which outranks the UA rule behind the `hidden`
   attribute, so anything rendered hidden still showed. */
.pxs [hidden] { display: none !important; }

/* The examples button sits ON the picture, bottom right. It has to be obvious:
   the whole point of this step is that one look at the examples sells it. */
.pxs-bk-figwrap { position: relative; }
.pxs .pxs-bk-examples {
	position: absolute; right: 12px; bottom: 12px;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 14px; border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(255,255,255,.94); color: var(--pxs-ink);
	backdrop-filter: blur(8px);
	box-shadow: 0 10px 26px -12px rgba(0,0,0,.5);
	font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px;
	transition: background .2s var(--pxs-ease), transform .2s var(--pxs-ease);
}
.pxs .pxs-bk-examples:hover { background: #fff; transform: translateY(-1px); }
.pxs .pxs-bk-examples:focus-visible { outline: 2px solid var(--pxs-accent); outline-offset: 2px; }
.pxs-bk-examples svg { width: 15px; height: 15px; }
.pxs-bk-examples em {
	font-style: normal; font-family: var(--pxs-mono); font-size: 11px;
	color: #fff; background: var(--pxs-accent);
	border-radius: 999px; padding: 1px 6px;
}
.pxs-bk-galgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 6px; }
.pxs-bk-galgrid figure { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 3/2; background: #e9e7e4; }
.pxs-bk-galgrid img, .pxs-bk-galgrid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs-bk-galmodal .pxs-modal-box { max-width: 900px; }
@media (max-width: 640px) {
	.pxs .pxs-bk-examples { right: 10px; bottom: 10px; padding: 8px 12px; font-size: 12.5px; }
	.pxs-bk-galgrid { grid-template-columns: 1fr; }
}

/* The reusable info disclosure. Inline with the sentence it belongs to, so it
   reads as part of that line rather than as a floating control. */
.pxs-bk-info { display: inline-block; position: relative; vertical-align: -3px; margin-left: 5px; }
.pxs-bk-info > summary {
	list-style: none; cursor: pointer; display: inline-grid; place-items: center;
	width: 19px; height: 19px; border-radius: 100px; color: var(--pxs-grey);
	transition: color .2s var(--pxs-ease), background .2s var(--pxs-ease);
}
.pxs-bk-info > summary::-webkit-details-marker { display: none; }
.pxs-bk-info > summary svg { width: 15px; height: 15px; }
.pxs-bk-info > summary:hover, .pxs-bk-info[open] > summary { color: var(--pxs-accent); }
.pxs-bk-info > summary:focus-visible { outline: 2px solid var(--pxs-accent); outline-offset: 2px; }
.pxs-bk-info > p {
	position: absolute; z-index: 20; left: 50%; top: calc(100% + 8px);
	transform: translateX(-50%);
	width: max-content; max-width: min(260px, 74vw);
	margin: 0; padding: 10px 13px; border-radius: 12px;
	background: var(--pxs-ink); color: #fff;
	font-family: var(--pxs-sans); font-size: 13px; line-height: 1.45; text-align: left;
	box-shadow: 0 16px 40px -18px rgba(0,0,0,.6);
}
.pxs-bk-info > p::before {
	content: ''; position: absolute; left: 50%; top: -5px; transform: translateX(-50%) rotate(45deg);
	width: 10px; height: 10px; background: var(--pxs-ink); border-radius: 2px;
}
/* On a phone the bubble cannot be anchored to the icon: the icon sits at the end
   of a centred sentence, so wherever that lands the bubble runs off one edge.
   It becomes a plain block under the note instead, which always fits. */
@media (max-width: 640px) {
	.pxs-bk-note-c { position: relative; }
	.pxs-bk-info { position: static; }
	.pxs-bk-info > p {
		left: 0; right: 0; top: calc(100% + 8px); transform: none;
		width: auto; max-width: none; text-align: center;
	}
	.pxs-bk-info > p::before { display: none; }
}

/* A count is faster to read as glyphs than as a number. */
.pxs-bk-houses { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; color: var(--pxs-accent); margin-right: 12px; }
.pxs-bk-houses svg { width: 17px; height: 17px; }
.pxs-bk-card.is-sel .pxs-bk-houses { color: var(--pxs-accent); }
@media (max-width: 640px) {
	.pxs-bk-houses svg { width: 15px; height: 15px; }
	.pxs-bk-houses { gap: 1px; margin-right: 10px; }
}

/* Count options: full-width rows, same shape as the night choices. There are
   only ever three, and they are read rather than compared side by side. */
.pxs-bk-countopts { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 6px; }
.pxs-bk-countopts .pxs-bk-card { flex-direction: row; align-items: center; padding: 14px 16px; border-radius: 16px; }
.pxs-bk-countopts .pxs-bk-card-main { padding: 0; flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
	.pxs-bk-navi { gap: 0; padding: 0; width: 40px; height: 40px; justify-content: center; border-radius: 100px; }
	.pxs-bk-navi-ic { width: 40px; height: 40px; display: grid; place-items: center; }
	.pxs-bk-navi-ic svg { width: 18px; height: 18px; }
	.pxs-bk-nav { gap: 8px 7px; justify-content: center; }
	.pxs-bk-countopts .pxs-bk-card { padding: 12px 14px; }
	.pxs-bk-countopts .pxs-bk-card-main b { font-size: 15px; }
	.pxs-bk-countopts .pxs-bk-card-sub { font-size: 12px; line-height: 1.35; }
}

/* The one nudge. A note inside the step, never a modal: it must be ignorable at
   a glance, because a suggestion that blocks the flow costs more than it earns. */
.pxs-bk-nudge {
	display: flex; align-items: center; gap: 10px;
	margin: 14px 0 0; padding: 12px 12px 12px 14px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--pxs-accent) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--pxs-accent) 26%, transparent);
	opacity: 0; transform: translateY(6px);
	transition: opacity .35s var(--pxs-ease), transform .35s var(--pxs-ease);
}
.pxs-bk-nudge.is-in { opacity: 1; transform: none; }
.pxs-bk-nudge-tx { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--pxs-ink); }
.pxs .pxs-bk-nudge-go {
	flex: 0 0 auto; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--pxs-accent); color: #fff; font-size: 13px; font-weight: 600;
}
.pxs .pxs-bk-nudge-x {
	flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px;
	background: transparent; color: var(--pxs-grey); font-size: 19px; line-height: 1; cursor: pointer;
}
.pxs .pxs-bk-nudge-x:hover { background: rgba(0,0,0,.06); }
@media (max-width: 640px) {
	.pxs-bk-nudge { flex-wrap: wrap; padding: 11px 12px; gap: 8px; }
	.pxs-bk-nudge-tx { flex: 1 1 100%; font-size: 13px; }
	.pxs .pxs-bk-nudge-go { padding: 7px 12px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.pxs-bk-nudge { transition: none; opacity: 1; transform: none; }
}

/* Night shoot: two plain choices under one picture. No grid, because there are
   only ever two options and they read better as full-width rows. */

/* Swipeable examples. A scroll container with snap points, so the phone gesture
   is the platform's own and there is no drag logic to get wrong; script only
   mirrors the position into the dots, the counter and the arrows. The arrows are
   not decoration — a mouse cannot swipe, and without them a desktop visitor sees
   slide one and assumes that is the whole set. */
.pxs-bk-slider { position: relative; margin: 14px 0 4px; }
.pxs-bk-slides {
	display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 16px;
}
.pxs-bk-slides::-webkit-scrollbar { display: none; }
.pxs .pxs-bk-slide {
	flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
	padding: 0; border: 0; background: #f0efec; border-radius: 16px; overflow: hidden;
	aspect-ratio: 3/2; cursor: zoom-in;
}
.pxs-bk-slide img, .pxs-bk-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs .pxs-bk-slide:focus-visible { outline: 2px solid var(--pxs-accent); outline-offset: 2px; }

.pxs .pxs-bk-sarrow {
	position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
	width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.92); color: var(--pxs-ink);
	box-shadow: 0 6px 20px -8px rgba(0,0,0,.5);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: opacity .2s, background .2s;
}
.pxs-bk-sarrow svg { width: 18px; height: 18px; }
.pxs-bk-sarrow.is-prev { left: 10px; }
.pxs-bk-sarrow.is-next { right: 10px; }
.pxs .pxs-bk-sarrow:hover { background: #fff; }
.pxs .pxs-bk-sarrow[disabled] { opacity: 0; pointer-events: none; }

.pxs-bk-sdots { display: flex; justify-content: center; gap: 6px; margin-top: 9px; }
.pxs-bk-sdots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(13,13,13,.18); transition: .3s; }
.pxs-bk-sdots i.on { background: var(--pxs-accent); width: 18px; border-radius: 100px; }

.pxs-bk-scount, .pxs-bk-szoom {
	position: absolute; z-index: 2; top: 10px; pointer-events: none;
	color: #fff; background: rgba(13,13,13,.55); backdrop-filter: blur(6px); border-radius: 999px;
}
.pxs-bk-scount { right: 10px; font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .04em; padding: 4px 9px; }
.pxs-bk-scount b { font-weight: 500; }
.pxs-bk-szoom { left: 10px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.pxs-bk-szoom svg { width: 14px; height: 14px; }
.pxs-bk-slider.is-single .pxs-bk-slides { overflow: visible; }

@media (max-width: 640px) {
	.pxs-bk-slider { margin: 12px 0 2px; }
	.pxs .pxs-bk-sarrow { width: 32px; height: 32px; }
	.pxs-bk-sarrow.is-prev { left: 7px; }
	.pxs-bk-sarrow.is-next { right: 7px; }
}
@media (hover: none) {
	/* Where swiping is the obvious gesture the arrows are just clutter. */
	.pxs .pxs-bk-sarrow { opacity: 0; pointer-events: none; }
}

.pxs-bk-night-fig { border-radius: 16px; overflow: hidden; margin: 14px 0 4px; aspect-ratio: 16/9; background: #f0efec; }
.pxs-bk-night-fig img, .pxs-bk-night-fig video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs-bk-night-opts { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 6px; }
.pxs-bk-night-opts .pxs-bk-card { flex-direction: row; align-items: center; padding: 14px 16px; border-radius: 16px; }
.pxs-bk-night-opts .pxs-bk-card-main { padding: 0; flex: 1 1 auto; min-width: 0; }
.pxs-bk-night-opts .pxs-bk-card-price { padding: 0 0 0 12px; margin: 0; flex: 0 0 auto; white-space: nowrap; font-size: 15px; }
/* In this row layout the price occupies the card's top-right, so an absolutely
   positioned tick lands on top of the number. It joins the row instead, and
   keeps its space when hidden so selecting does not reflow the card. */
.pxs-bk-night-opts .pxs-bk-tick { position: static; flex: 0 0 auto; margin-left: 12px; }
@media (max-width: 640px) {
	.pxs-bk-night-fig { aspect-ratio: 3/2; margin: 12px 0 2px; }
	.pxs-bk-night-opts .pxs-bk-card { padding: 12px 14px; }
	.pxs-bk-night-opts .pxs-bk-card-main b { font-size: 15px; }
	.pxs-bk-night-opts .pxs-bk-card-sub { font-size: 12px; line-height: 1.35; }
	.pxs-bk-night-opts .pxs-bk-card-price { font-size: 14px; }
}
.pxs-bk-note-c { text-align: center; }

/* Availability: two questions, so two panels.
   They used to run down one column — a calendar in a card, then a loose heading
   and some loose chips — which read as one long question and made the second
   half easy to scroll straight past. */
.pxs-bk-avail .pxs-bk-zone {
	margin-top: 18px; padding: 16px 16px 18px;
	background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.07); border-radius: 20px;
}
.pxs-bk-zone-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pxs-bk-zone-n {
	flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
	background: var(--pxs-ink); color: #fff;
	font-family: var(--pxs-mono); font-size: 11px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.pxs-bk-zone-head h4 {
	font-family: var(--pxs-sans); font-weight: 600; font-size: 1.02rem;
	letter-spacing: -.015em; text-transform: none; margin: 0;
}
/* What the panel currently holds, so a glance is enough once it scrolls away. */
.pxs-bk-zone-a {
	margin-left: auto; text-align: right; min-width: 0;
	font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
	color: var(--pxs-accent);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pxs-bk-zone-a:empty { display: none; }
.pxs-bk-zone-sub { color: var(--pxs-grey); font-size: 13.5px; margin: -4px 0 10px; }
.pxs-bk-avail .pxs-bk-cal-wrap { margin-top: 0; }
/* Time of day: one option per row, each led by its own picture of that hour.
   Four text chips side by side had to be read to be told apart, and on a phone
   they wrapped into an uneven block that looked like a mistake. A sunrise, a
   high sun and a sunset are recognised before they are read. */
.pxs-bk-timelist { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 4px 0 0; }
.pxs .pxs-bk-time {
	display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
	padding: 13px 15px; border-radius: 16px; cursor: pointer;
	background: rgba(255,255,255,.72); border: 1px solid rgba(0,0,0,.1);
	color: var(--pxs-ink); transition: .2s var(--pxs-ease);
}
.pxs .pxs-bk-time:hover { border-color: rgba(255,93,41,.5); background: #fff; }
.pxs-bk-time-ic { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,93,41,.09); color: var(--pxs-accent); transition: .2s var(--pxs-ease); }
.pxs-bk-time-ic svg { width: 21px; height: 21px; }
.pxs-bk-time-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pxs-bk-time-t b { font-family: var(--pxs-sans); font-weight: 600; font-size: 15px; }
.pxs-bk-time-t i { font-style: normal; font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .05em; color: var(--pxs-faint); margin-top: 3px; }
.pxs-bk-time-tick { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.2); color: #fff; transition: .2s var(--pxs-ease); }
.pxs-bk-time-tick svg { width: 12px; height: 12px; opacity: 0; transition: opacity .2s; }
.pxs .pxs-bk-time.is-sel { border-color: var(--pxs-accent); background: rgba(255,93,41,.07); box-shadow: 0 0 0 1px var(--pxs-accent) inset; }
.pxs .pxs-bk-time.is-sel .pxs-bk-time-ic { background: var(--pxs-accent); color: #fff; }
.pxs .pxs-bk-time.is-sel .pxs-bk-time-tick { background: var(--pxs-accent); border-color: var(--pxs-accent); }
.pxs .pxs-bk-time.is-sel .pxs-bk-time-tick svg { opacity: 1; }

/* The opt-out is the same promise the calendar step makes, so it is the same
   button. It spans the grid because it is not one of the choices. */
.pxs-bk-later-inline { grid-column: 1 / -1; margin-top: 4px; }
.pxs .pxs-bk-laterbtn.is-sel { border-style: solid; border-color: var(--pxs-accent); background: rgba(255,93,41,.08); color: var(--pxs-accent); }
.pxs .pxs-bk-laterbtn.is-sel .pxs-bk-later-tick { background: var(--pxs-accent); border-color: var(--pxs-accent); }
.pxs .pxs-bk-laterbtn.is-sel .pxs-bk-later-tick svg { opacity: 1; }
@media (max-width: 640px) {
	.pxs-bk-avail .pxs-bk-zone { padding: 14px 12px 15px; margin-top: 14px; border-radius: 18px; }
	.pxs-bk-zone-a { font-size: 9.5px; letter-spacing: .05em; }
	/* One per row on a phone: the whole reason this stopped being chips. */
	.pxs-bk-timelist { grid-template-columns: minmax(0,1fr); gap: 8px; }
	.pxs .pxs-bk-time { padding: 11px 13px; gap: 11px; }
	.pxs-bk-time-ic { width: 34px; height: 34px; border-radius: 11px; }
	.pxs-bk-time-ic svg { width: 19px; height: 19px; }
	.pxs .pxs-bk-laterbtn { width: 100%; justify-content: center; }
}

/* upgrade cards (select + slider + read-more) */
.pxs-bk-upgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 16px 0 6px; }
.pxs-bk-upcard { position: relative; display: flex; flex-direction: column; text-align: left; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.08); cursor: pointer; transition: transform .2s var(--pxs-ease), box-shadow .2s, border-color .2s; }
.pxs-bk-upcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.4); }
.pxs-bk-upcard.is-sel { border-color: var(--pxs-accent); box-shadow: 0 0 0 2px var(--pxs-accent); }
.pxs-bk-up-media { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: #eee; }
.pxs-bk-up-media > .pxs-bk-up-img, .pxs-bk-up-media > img { width: 100%; height: 100%; object-fit: cover; }
.pxs-bk-up-slides { position: absolute; inset: 0; }
.pxs-bk-up-slides .pxs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.pxs-bk-up-slides .pxs-slide.is-active { opacity: 1; }
.pxs-bk-up-slides .pxs-slide img { width: 100%; height: 100%; object-fit: cover; }
.pxs-bk-up-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); }
.pxs-bk-up-title { position: absolute; z-index: 2; left: 16px; bottom: 13px; color: #fff; font-family: var(--pxs-sans); font-weight: 600; font-size: 18px; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.pxs-bk-upcard .pxs-bk-tick { position: absolute; z-index: 3; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--pxs-accent); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: .2s var(--pxs-ease); }
.pxs-bk-upcard .pxs-bk-tick svg { width: 15px; height: 15px; }
.pxs-bk-upcard.is-sel .pxs-bk-tick { opacity: 1; transform: none; }
.pxs-bk-up-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.pxs-bk-up-add { font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--pxs-grey); }
.pxs-bk-upcard.is-sel .pxs-bk-up-add { color: var(--pxs-accent); }
.pxs-bk-readmore { display: inline-flex; align-items: center; gap: 5px; font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--pxs-accent); cursor: pointer; }
.pxs-bk-readmore svg { width: 12px; height: 12px; transition: transform .35s; }
.pxs-bk-upcard.pxs-open .pxs-bk-readmore svg { transform: rotate(180deg); }
.pxs-bk-up-detail { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.22,.9,.25,1), opacity .35s; }
.pxs-bk-upcard.pxs-open .pxs-bk-up-detail { max-height: 400px; opacity: 1; }
.pxs-bk-up-detail-in { display: block; padding: 0 16px 16px; }
.pxs-bk-up-p { display: block; font-size: 12.5px; line-height: 1.6; color: var(--pxs-ink2); margin-bottom: 8px; }

/* location step */
.pxs-bk-optwrap { margin: 14px 0 4px; }
.pxs-bk-optcard { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(0,0,0,.1); cursor: pointer; transition: .18s; }
.pxs-bk-optcard:hover { border-color: rgba(0,0,0,.25); }
.pxs-bk-optcard.is-sel { border-color: var(--pxs-accent); box-shadow: 0 0 0 1px var(--pxs-accent); background: rgba(255,93,41,.05); }
.pxs-bk-opt-check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.pxs-bk-optcard.is-sel .pxs-bk-opt-check { border-color: var(--pxs-accent); background: var(--pxs-accent); }
.pxs-bk-opt-check .pxs-bk-tick { opacity: 0; color: #fff; display: flex; }
.pxs-bk-opt-check .pxs-bk-tick svg { width: 14px; height: 14px; }
.pxs-bk-optcard.is-sel .pxs-bk-opt-check .pxs-bk-tick { opacity: 1; }
.pxs-bk-opt-main b { display: block; font-family: var(--pxs-sans); font-weight: 600; font-size: 15.5px; }
.pxs-bk-opt-main span { color: var(--pxs-grey); font-size: 13px; }
.pxs-bk-loc-block { margin-top: 22px; }
.pxs-bk-dists { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pxs-bk-dist { display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px; border-radius: 100px; background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.08); }
.pxs-bk-dist-ic { display: flex; color: var(--pxs-accent); } .pxs-bk-dist-ic svg { width: 18px; height: 18px; }
.pxs-bk-dist-tx b { font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px; }
.pxs-bk-dist-tx em { font-style: normal; color: var(--pxs-grey); font-size: 12px; margin-left: 6px; }
.pxs-bk-loc-imgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-top: 12px; }
.pxs-bk-loc-img { border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; }
.pxs-bk-loc-img img { width: 100%; height: 100%; object-fit: cover; }

/* exit popup */
.pxs-bk-exit { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 22px; }
.pxs-bk-exit[hidden] { display: none; }
.pxs-bk-exit-bg { position: absolute; inset: 0; background: rgba(10,10,10,.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.pxs-bk-exit-box { position: relative; z-index: 1; max-width: 440px; width: 100%; border-radius: 22px; padding: 30px; text-align: center; animation: pxs-pop .35s var(--pxs-ease) both; }
.pxs-bk-exit-box h3 { font-family: var(--pxs-sans); font-weight: 600; font-size: 1.4rem; margin-bottom: 8px; }
.pxs-bk-exit-box p { color: var(--pxs-grey); font-size: 14.5px; margin-bottom: 18px; }
.pxs-bk-exit-form { display: flex; gap: 8px; }
.pxs-bk-exit-form input { flex: 1; padding: 13px 16px; border-radius: 100px; border: 1px solid rgba(0,0,0,.14); background: #fff; font-family: var(--pxs-body); font-size: 14px; }
.pxs-bk-exit-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,.06); cursor: pointer; font-size: 18px; line-height: 1; color: #555; }
.pxs-bk-exit-ok { color: var(--pxs-accent); font-weight: 600; font-size: 14px; margin-top: 12px; }

/* availability calendar */
.pxs-bk-cal-wrap { max-width: 430px; margin: 18px auto 4px; }
.pxs-bk-cal { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 20px; padding: 16px 16px 18px; box-shadow: 0 22px 50px -34px rgba(0,0,0,.45); }
.pxs-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pxs-cal-month { font-family: var(--pxs-sans); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.pxs-cal-nav { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); background: #fff; cursor: pointer; font-size: 18px; line-height: 1; color: var(--pxs-ink); display: flex; align-items: center; justify-content: center; transition: .2s; }
.pxs-cal-nav:hover:not(:disabled) { background: var(--pxs-accent); border-color: transparent; color: #fff; }
.pxs-cal-nav:disabled { opacity: .3; cursor: default; }
.pxs-cal-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 6px; }
.pxs-cal-dow span { text-align: center; font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--pxs-faint); padding: 4px 0; }
.pxs-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.pxs-cal-empty { aspect-ratio: 1; }
.pxs-cal-day { aspect-ratio: 1; border: 0; background: transparent; border-radius: 12px; cursor: pointer; font-family: var(--pxs-body); font-size: 14px; color: var(--pxs-ink); display: flex; align-items: center; justify-content: center; transition: background .18s var(--pxs-ease), color .18s, transform .18s; }
.pxs-cal-day:hover:not(:disabled) { background: rgba(255,93,41,.12); }
.pxs-cal-day:active:not(:disabled) { transform: scale(.92); }
.pxs-cal-day.is-today { box-shadow: inset 0 0 0 1.5px rgba(255,93,41,.5); }
/* the :hover rule above is more specific than a plain .is-sel, which left a just-clicked
   day washed out (reading as "unavailable") until the pointer moved away — beat it */
.pxs-cal-day.is-sel,
.pxs-cal-day.is-sel:hover:not(:disabled) { background: var(--pxs-accent); color: #fff; font-weight: 600; }
.pxs-cal-day.is-past { color: rgba(0,0,0,.22); cursor: default; }
.pxs-cal-selected { text-align: center; color: var(--pxs-accent); font-weight: 600; font-size: 14px; min-height: 20px; margin-top: 12px; opacity: 0; transition: opacity .3s; }
.pxs-cal-selected.has { opacity: 1; }
.pxs-bk-subtitle { text-align: center; font-family: var(--pxs-sans); font-weight: 600; font-size: 16px; margin: 26px 0 12px; }
.pxs-bk-note-c { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pxs-bk-note-c > svg { width: 16px; height: 16px; color: var(--pxs-accent); flex: 0 0 auto; }

/* "I'll pick a date later" escape hatch */
.pxs-bk-later { text-align: center; margin-top: 16px; }
.pxs-bk-laterbtn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 100px; border: 1px dashed rgba(0,0,0,.2); background: rgba(255,255,255,.6); color: var(--pxs-ink2); font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; cursor: pointer; transition: .2s var(--pxs-ease); }
.pxs-bk-laterbtn:hover { border-color: var(--pxs-accent); color: var(--pxs-accent); }
.pxs-bk-later-tick { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.22); color: #fff; transition: .2s var(--pxs-ease); }
.pxs-bk-later-tick svg { width: 12px; height: 12px; opacity: 0; transition: opacity .2s; }
.pxs-bk-later.is-on .pxs-bk-laterbtn { border-style: solid; border-color: var(--pxs-accent); background: rgba(255,93,41,.08); color: var(--pxs-accent); }
.pxs-bk-later.is-on .pxs-bk-later-tick { background: var(--pxs-accent); border-color: var(--pxs-accent); }
.pxs-bk-later.is-on .pxs-bk-later-tick svg { opacity: 1; }
.pxs-bk-later-note { display: flex; align-items: flex-start; gap: 9px; text-align: left; max-width: 430px; margin: 14px auto 0; padding: 12px 15px; border-radius: 14px; background: rgba(255,93,41,.07); border: 1px solid rgba(255,93,41,.24); color: var(--pxs-ink2); font-size: 13px; line-height: 1.55; animation: pxs-pop .3s var(--pxs-ease) both; }
.pxs-bk-later-note[hidden] { display: none; }
.pxs-bk-later-note svg { width: 16px; height: 16px; color: var(--pxs-accent); flex: 0 0 auto; margin-top: 2px; }

/* the upgrade popup inside the booking cards — same glass panel as the Upgrades section */
.pxs-bk-upcard .pxs-up-glass { z-index: 4; }
.pxs-bk-upcard .pxs-up-glass-in { justify-content: flex-end; padding: 16px 17px; gap: 7px; }
.pxs-bk-upcard .pxs-up-glass-in > * { display: block; }
.pxs-bk-upcard .pxs-up-kicker { display: flex; }
.pxs-bk-upcard .pxs-up-gtitle { font-size: 17px; }
.pxs-bk-upcard .pxs-up-recap { font-size: 13.5px; }
.pxs-bk-upcard .pxs-up-dtl { font-size: 12px; line-height: 1.55; }
.pxs-bk-upcard .pxs-up-note { display: flex; padding: 9px 11px; }
.pxs-bk-upcard .pxs-up-note span { font-size: 11px; }
.pxs-bk-upcard .pxs-up-x { display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; }
.pxs-bk-upcard.pxs-open .pxs-up-x { opacity: 1; pointer-events: auto; }
.pxs-bk-upcard.pxs-open .pxs-up-glass { opacity: 1; pointer-events: auto; }
.pxs-bk-upcard.pxs-open .pxs-up-glass-in { transform: none; }
.pxs-bk-upcard.pxs-open .pxs-up-glass-in > * { opacity: 1; transform: none; }
.pxs-bk-upcard.pxs-open .pxs-up-glass-in > :nth-child(2) { transition-delay: .05s; }
.pxs-bk-upcard.pxs-open .pxs-up-glass-in > :nth-child(3) { transition-delay: .1s; }
.pxs-bk-upcard.pxs-open .pxs-up-glass-in > :nth-child(4) { transition-delay: .15s; }
.pxs-bk-upcard.pxs-open .pxs-bk-up-title { opacity: 0; }
.pxs-bk-up-title { transition: opacity .35s var(--pxs-ease); }

/* soft rule between the questions of one step */
.pxs-bk-sep { height: 1px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.1) 22%, rgba(0,0,0,.1) 78%, rgba(0,0,0,0)); margin: clamp(22px,3vw,30px) 0 4px; }

/* multi-listing checkbox (booking) + listing-link page form */
.pxs-bk-multi { display: flex; align-items: flex-start; gap: 13px; margin: 16px auto 0; max-width: 520px; padding: 15px 17px; border-radius: 16px; background: rgba(255,255,255,.72); border: 1px solid rgba(0,0,0,.1); color: var(--pxs-ink2); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.pxs-bk-multi:hover { border-color: rgba(0,0,0,.24); }
.pxs-bk-multi { position: relative; }
.pxs-bk-multi input { position: absolute; opacity: 0; width: 0; height: 0; padding: 0; margin: 0; border: 0; }
.pxs-bk-multi-box { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; border: 2px solid rgba(0,0,0,.2); background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; transition: .18s var(--pxs-ease); }
.pxs-bk-multi-box svg { width: 14px; height: 14px; opacity: 0; transform: scale(.5); transition: .18s var(--pxs-ease); }
.pxs-bk-multi-tx { display: block; }
.pxs-bk-multi-tx b { display: block; font-family: var(--pxs-sans); font-weight: 600; font-size: 15px; color: var(--pxs-ink); }
.pxs-bk-multi-tx em { display: block; font-style: normal; color: var(--pxs-grey); font-size: 12.5px; line-height: 1.5; margin-top: 2px; }
.pxs-bk-multi:has(input:checked) { border-color: var(--pxs-accent); background: rgba(255,93,41,.05); box-shadow: 0 0 0 1px var(--pxs-accent); }
.pxs-bk-multi:has(input:checked) .pxs-bk-multi-box { background: var(--pxs-accent); border-color: var(--pxs-accent); }
.pxs-bk-multi:has(input:checked) .pxs-bk-multi-box svg { opacity: 1; transform: none; }
.pxs-bk-multi:focus-within { box-shadow: 0 0 0 2px rgba(255,93,41,.35); }
.pxs-bk-upsell { margin-top: 16px; padding: 16px 18px; border-radius: 16px; background: rgba(255,93,41,.07); border: 1px solid rgba(255,93,41,.28); }
.pxs-bk-upsell-t { font-size: 14px; color: var(--pxs-ink2); margin-bottom: 12px; line-height: 1.5; }
.pxs-bk-upsell-chip b { font-weight: 600; }
.pxs-bk-upsell-chip span { color: var(--pxs-accent); font-weight: 600; }
.pxs-linkpage .pxs-wrap { max-width: 640px; }
.pxs-lp-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin: 8px auto 0; text-align: left; }
.pxs-lp-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px; color: var(--pxs-ink2); }
.pxs-lp-form input[type=email], .pxs-lp-form input[type=url], .pxs-lp-form input[type=text], .pxs-lp-form input[type=time], .pxs-lp-form textarea { font-family: var(--pxs-body); font-size: 15px; padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14); background: #fff; width: 100%; }
.pxs-lp-form textarea { resize: vertical; }
.pxs-lp-check { flex-direction: row !important; align-items: flex-start; gap: 10px; font-weight: 400 !important; }
.pxs-lp-check input { margin-top: 2px; accent-color: var(--pxs-accent); }
.pxs-lp-form .pxs-btn { align-self: flex-start; margin-top: 4px; }
.pxs-lp-ok { color: var(--pxs-accent); font-weight: 600; font-size: 14.5px; }

/* booking confirmation page */
.pxs .pxs-cf-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 8px auto 0; text-align: left; }
.pxs .pxs-cf-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; }
.pxs .pxs-cf-h { font-family: var(--pxs-sans); font-weight: 700; font-size: 15px; color: var(--pxs-ink); }
.pxs .pxs-cf-sub { font-family: var(--pxs-sans); font-weight: 600; font-size: 13px; color: var(--pxs-ink2); margin-top: 4px; }
.pxs .pxs-cf-label { display: block; font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #9a9a95; margin-bottom: 2px; }
.pxs .pxs-cf-money { font-family: var(--pxs-sans); font-weight: 800; font-size: 26px; color: var(--pxs-accent); }
.pxs .pxs-cf-recap-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pxs .pxs-cf-doclink { font-size: 13.5px; font-weight: 600; color: var(--pxs-ink); text-decoration: underline; text-underline-offset: 3px; }
.pxs .pxs-cf-trust { font-size: 12.5px; color: #6f6f6a; }
.pxs .pxs-cf-sunline { font-size: 13.5px; color: #6f6f6a; margin: 0; line-height: 1.5; }
.pxs .pxs-cf-sunline b { color: var(--pxs-accent); }
.pxs .pxs-cf-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pxs .pxs-cf-chip { padding: 10px 16px; border-radius: 100px; border: 1px solid rgba(0,0,0,.14); background: #fff; font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px; color: var(--pxs-ink); cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.pxs .pxs-cf-chip:hover { border-color: var(--pxs-accent); }
.pxs .pxs-cf-chip.is-sel { background: var(--pxs-accent); border-color: var(--pxs-accent); color: #fff; }
.pxs .pxs-cf-in { font-family: var(--pxs-body); font-size: 14.5px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14); background: #fff; width: 100%; }
.pxs .pxs-cf-note { font-size: 12.5px; color: #8a8a86; margin: 0; line-height: 1.5; }
.pxs .pxs-cf-noteslabel { display: flex; flex-direction: column; gap: 6px; font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px; color: var(--pxs-ink2); }
.pxs .pxs-cf-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--pxs-ink); }
.pxs .pxs-cf-list li::marker { color: var(--pxs-accent); }
.pxs .pxs-cf-btn { align-self: stretch; justify-content: center; }
.pxs .pxs-cf-btn:disabled { opacity: .45; cursor: not-allowed; }
.pxs .pxs-cf-ok { padding: 18px; background: rgba(255,93,41,.07); border: 1px solid rgba(255,93,41,.25); border-radius: 16px; font-size: 14.5px; line-height: 1.55; }
.pxs .pxs-cf-ok b { color: var(--pxs-accent); }
.pxs .pxs-cf-ok p { margin: 6px 0 0; }
/* The bundle page saying a send did not land, with WhatsApp and email
   underneath. Same buttons as the quote form's failure card. */
.pxs .pxs-mu-fail { margin-top: 14px; padding: 18px; text-align: center; background: rgba(179,45,46,.05); border: 1px solid rgba(179,45,46,.22); border-radius: 16px; font-size: 14.5px; line-height: 1.55; }
.pxs .pxs-mu-fail b { display: block; font-size: 16px; }
.pxs .pxs-mu-fail p { margin: 6px auto 0; max-width: 440px; color: var(--pxs-grey); }
.pxs .pxs-mu-fail .pxs-bk-failed-links { margin-top: 14px !important; }
.pxs .pxs-cf-calwrap .pxs-bk-cal { max-width: 360px; }
.pxs .pxs-confirmpage .pxs-lp-mapblock { padding: 0; border: 0; }

/* footer */
.pxs.pxs-footer { background: #131312; color: #d9d8d4; padding: clamp(56px, 7vw, 96px) 0 clamp(30px, 3.4vw, 44px); }
.pxs .pxs-foot-in { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.pxs .pxs-foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: clamp(36px, 5vw, 60px); }
.pxs .pxs-foot-logo { font-family: var(--pxs-sans); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: #fff; }
.pxs .pxs-foot-tag { margin: 10px 0 0; font-size: 15px; color: #b8b7b2; line-height: 1.55; max-width: 340px; }
.pxs .pxs-foot-service { margin: 14px 0 0; font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #7b7a76; line-height: 1.8; }
.pxs .pxs-foot-col { display: flex; flex-direction: column; gap: 9px; }
.pxs .pxs-foot-h { font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pxs-accent); margin-bottom: 4px; }
.pxs .pxs-foot-col a { color: #d9d8d4; text-decoration: none; font-size: 14.5px; transition: color .16s ease; width: fit-content; }
.pxs .pxs-foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pxs-accent); }
.pxs .pxs-foot-legal { border-top: 1px solid rgba(255,255,255,.09); padding: 22px 0 30px; display: flex; flex-direction: column; gap: 8px; }
.pxs .pxs-foot-imp { margin: 0; font-size: 12.5px; color: #8f8e89; line-height: 1.7; }
.pxs .pxs-foot-vat { margin: 0; font-size: 11.5px; color: #6f6e6a; line-height: 1.7; max-width: 720px; }
.pxs .pxs-foot-copy { margin: 6px 0 0; font-family: var(--pxs-mono); font-size: 11px; color: #5f5e5a; }
@media (max-width: 760px) {
	.pxs .pxs-foot-top { grid-template-columns: 1fr 1fr; }
	.pxs .pxs-foot-brand { grid-column: 1 / -1; }
}

/* pricing: multi-apartment teaser line */
.pxs .pxs-multi-line { text-align: center; margin: 26px auto 0; font-size: 14.5px; color: #6f6f6a; }
/* The link reads as a link through colour and weight, not a line. */
.pxs .pxs-multi-line a { color: var(--pxs-accent); font-weight: 600; }
.pxs .pxs-multi-line a::after { content: ' \2192'; }
.pxs .pxs-multi-line a:hover { color: var(--pxs-ink); }

/* multi-apartment intake page */
.pxs .pxs-mu-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 8px auto 0; text-align: left; }
.pxs .pxs-mu-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pxs .pxs-mu-rows { display: flex; flex-direction: column; gap: 10px; }
.pxs .pxs-mu-row { display: grid; grid-template-columns: 150px 1fr 1fr 30px; gap: 8px; align-items: center; }
.pxs .pxs-mu-size { font-family: var(--pxs-body); font-size: 14px; padding: 12px 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14); background: #fff; }
.pxs .pxs-mu-del { border: 0; background: none; color: #b32d2e; font-size: 20px; cursor: pointer; line-height: 1; padding: 4px; }
.pxs .pxs-mu-add { align-self: flex-start; }
.pxs .pxs-mu-btn { align-self: stretch; justify-content: center; }
.pxs .pxs-mu-btn:disabled { opacity: .45; cursor: not-allowed; }
.pxs .pxs-mu-miss { border-color: #d63638 !important; }
@media (max-width: 640px) {
	.pxs .pxs-mu-2col { grid-template-columns: 1fr; }
	.pxs .pxs-mu-row { grid-template-columns: 1fr 30px; }
	.pxs .pxs-mu-row .pxs-mu-size { grid-column: 1; }
}

/* document: seasonal upsell block */
.pxs .pxs-doc-seasonal .pxs-doc-upsell-h { color: var(--pxs-accent); }
.pxs .pxs-doc-seasonal .pxs-doc-upline { border-color: rgba(255,93,41,.35); }

/* document: per-apartment groups */
.pxs .pxs-doc-group { margin: 0 0 6px; }
.pxs .pxs-doc-group-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 18px 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--pxs-ink); font-family: var(--pxs-sans); font-weight: 700; font-size: 15px; color: var(--pxs-ink); }
.pxs .pxs-doc-group-s { font-size: 13.5px; font-weight: 600; color: #8a8a86; white-space: nowrap; }

/* details page: map pin + compass + sun window */
.pxs .pxs-lp-mapblock { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; }
.pxs .pxs-lp-maphead { display: flex; flex-direction: column; gap: 4px; }
.pxs .pxs-lp-maptitle { font-family: var(--pxs-sans); font-weight: 700; font-size: 14.5px; color: var(--pxs-ink); }
.pxs .pxs-lp-maptitle em { font-style: normal; font-weight: 400; color: #8a8a86; }
.pxs .pxs-lp-mapsub { font-size: 13px; color: #6f6f6a; line-height: 1.5; }
.pxs .pxs-lp-search { display: flex; gap: 8px; }
.pxs .pxs-lp-searchin { flex: 1; font-family: var(--pxs-body); font-size: 14.5px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14); background: #fff; min-width: 0; }
.pxs .pxs-lp-searchbtn { padding: 10px 18px; }
.pxs .pxs-lp-map { height: 300px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,.1); z-index: 0; }
.pxs .pxs-lp-map:empty::before { content: "Loading map…"; display: flex; align-items: center; justify-content: center; height: 100%; color: #9a9a95; font-size: 13.5px; background: #f2f1ee; }
.pxs .pxs-lp-compass-wrap { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pxs .pxs-lp-compass-t { font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px; color: var(--pxs-ink2); }
.pxs .pxs-lp-compass { position: relative; width: 190px; height: 190px; }
.pxs .pxs-lp-compass-c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #9a9a95; pointer-events: none; }
.pxs .pxs-lp-dir { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); background: #fff; font-family: var(--pxs-sans); font-weight: 700; font-size: 12px; color: var(--pxs-ink); cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.pxs .pxs-lp-dir:hover { border-color: var(--pxs-accent); transform: scale(1.06); }
.pxs .pxs-lp-dir.is-sel { background: var(--pxs-accent); border-color: var(--pxs-accent); color: #fff; }
.pxs .pxs-lp-dir-n  { top: 0; left: 50%; transform: translateX(-50%); }
.pxs .pxs-lp-dir-n:hover { transform: translateX(-50%) scale(1.06); }
.pxs .pxs-lp-dir-s  { bottom: 0; left: 50%; transform: translateX(-50%); }
.pxs .pxs-lp-dir-s:hover { transform: translateX(-50%) scale(1.06); }
.pxs .pxs-lp-dir-e  { right: 0; top: 50%; transform: translateY(-50%); }
.pxs .pxs-lp-dir-e:hover { transform: translateY(-50%) scale(1.06); }
.pxs .pxs-lp-dir-w  { left: 0; top: 50%; transform: translateY(-50%); }
.pxs .pxs-lp-dir-w:hover { transform: translateY(-50%) scale(1.06); }
.pxs .pxs-lp-dir-ne { top: 9%; right: 9%; }
.pxs .pxs-lp-dir-nw { top: 9%; left: 9%; }
.pxs .pxs-lp-dir-se { bottom: 9%; right: 9%; }
.pxs .pxs-lp-dir-sw { bottom: 9%; left: 9%; }
.pxs .pxs-lp-sun { padding: 12px 14px; border-radius: 12px; background: rgba(255,93,41,.07); border: 1px solid rgba(255,93,41,.25); font-size: 14px; line-height: 1.55; color: var(--pxs-ink); }
.pxs .pxs-lp-sun b { color: var(--pxs-accent); }
@media (max-width: 560px) {
	.pxs .pxs-lp-map { height: 240px; }
	.pxs .pxs-lp-compass { width: 170px; height: 170px; }
	.pxs .pxs-lp-dir { width: 40px; height: 40px; }
}

/* client package document [pixel_document] — visual, image-by-image */
.pxs-doc-wrap { background: #edecea; padding: clamp(16px,3vw,40px) 12px; }

/* The step that carries on below the fold. A quote that ends at its total looks
   finished, and the date picker underneath it never gets found. */
.pxs-doc-next {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	max-width: 760px; margin: 14px auto 0; padding: 16px 22px;
	background: var(--pxs-accent); color: #fff; border-radius: 16px;
	text-decoration: none; box-shadow: 0 14px 34px rgba(255,93,41,.3);
	transition: transform .18s ease, box-shadow .18s ease;
}
.pxs-doc-next:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(255,93,41,.36); }
.pxs-doc-next b { display: block; font-size: 16px; font-weight: 700; }
.pxs-doc-next em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; opacity: .88; }
.pxs-doc-next svg { width: 26px; height: 26px; flex: 0 0 auto; animation: pxs-nudge 1.8s ease-in-out infinite; }
@keyframes pxs-nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .pxs-doc-next svg { animation: none; } }

@media (max-width: 560px) {
	/* The picker belongs to the same flow as the quote, so it gets the same
	   full-width treatment rather than sitting in a narrower column. */
	.pxs .pxs-pick-wrap .pxs-cf-card { padding: 16px 14px; }
	.pxs .pxs-cf-slots { grid-template-columns: 1fr 1fr; gap: 8px; }
	.pxs-doc-wrap { padding-left: 8px; padding-right: 8px; }
	.pxs .pxs-doc { padding: 20px 16px 22px; border-radius: 18px; }
	.pxs-doc-next { margin-left: 8px; margin-right: 8px; padding: 15px 18px; }
}
.pxs-doc-actions { max-width: 760px; margin: 0 auto 14px; text-align: right; }
.pxs-doc { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 20px; box-shadow: 0 40px 100px -60px rgba(0,0,0,.5); padding: clamp(24px,4vw,48px); }
.pxs-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid rgba(0,0,0,.08); }
.pxs-doc-brand { display: flex; align-items: center; gap: 12px; }
.pxs-doc-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.pxs-doc-from { font-family: var(--pxs-sans); font-weight: 700; font-size: 16px; color: var(--pxs-ink); }
.pxs-doc-fromsub { font-size: 12.5px; color: var(--pxs-accent); }
.pxs-doc-meta { text-align: right; }
.pxs-doc-title { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(18px,2.4vw,24px); letter-spacing: -.02em; }
.pxs-doc-for { font-size: 13px; color: var(--pxs-grey); margin-top: 3px; }
.pxs-doc-date { font-family: var(--pxs-mono); font-size: 11.5px; color: var(--pxs-faint); margin-top: 3px; }
.pxs-doc-intro { color: var(--pxs-ink2); font-size: 15px; line-height: 1.6; margin: 20px 0 4px; }
.pxs-doc-lines { margin: 18px 0 6px; }
.pxs-doc-line { display: flex; align-items: center; gap: clamp(14px,2vw,20px); padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.pxs-doc-line-img { width: clamp(84px,14vw,120px); flex: 0 0 auto; }
.pxs-doc-line-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; display: block; background: #f0efec; }
.pxs-doc-noimg { display: block; width: 100%; aspect-ratio: 4/3; border-radius: 12px; background: #f0efec; }
.pxs-doc-line-b { flex: 1; min-width: 0; }
.pxs-doc-line-t { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(15px,1.7vw,17px); color: var(--pxs-ink); }
.pxs-doc-line-d { font-size: 13px; color: var(--pxs-grey); margin-top: 3px; line-height: 1.45; }
.pxs-doc-line-q { font-family: var(--pxs-mono); font-size: 11.5px; color: var(--pxs-faint); margin-top: 5px; }
.pxs-doc-line-p { font-family: var(--pxs-sans); font-weight: 700; font-size: clamp(15px,1.8vw,18px); color: var(--pxs-ink); white-space: nowrap; }
.pxs-doc-totals { margin: 18px 0 0 auto; max-width: 320px; }
.pxs-doc-trow { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: var(--pxs-ink2); }
.pxs-doc-disc { color: var(--pxs-accent); }
.pxs-doc-total { border-top: 2px solid rgba(0,0,0,.1); margin-top: 4px; padding-top: 12px; font-family: var(--pxs-sans); font-weight: 700; font-size: 20px; color: var(--pxs-ink); }
.pxs-doc-foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.08); color: var(--pxs-grey); font-size: 13px; line-height: 1.6; }
.pxs-doc-foot b { color: var(--pxs-ink); }
.pxs-doc-vat { color: var(--pxs-faint); font-size: 12px; margin-top: 8px; }
.pxs-doc-upsell { margin-top: 24px; padding: 8px 20px 16px; border: 1.5px dashed rgba(255,93,41,.4); border-radius: 16px; background: rgba(255,93,41,.04); }
.pxs-doc-upsell-h { font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pxs-accent); margin: 12px 0 2px; }
.pxs-doc-upline { border-bottom-color: rgba(255,93,41,.16) !important; }
.pxs-doc-upline:last-of-type { border-bottom: 0 !important; }
.pxs-doc-upprice { color: var(--pxs-accent) !important; }
.pxs-doc-upnote { color: var(--pxs-grey); font-size: 12.5px; margin-top: 8px; }
/* ---- Save as PDF -----------------------------------------------------------
   The old rule hid everything with `visibility` and then pulled the document to
   `position: absolute; inset: 0`. `inset: 0` gives it the height of one page,
   so anything past the first page was simply cut off — a two-apartment quote
   printed as a fragment. Instead `initDocPrint()` marks the document and every
   one of its ancestors, and everything that is NOT on that path is removed from
   the layout entirely, so the document keeps normal flow and paginates.
   -------------------------------------------------------------------------- */
@media print {
	@page { margin: 12mm; }
	html, body { background: #fff !important; }
	body > *:not([data-pxs-print]),
	[data-pxs-print]:not([data-pxs-print="root"]) > *:not([data-pxs-print]) { display: none !important; }
	[data-pxs-print] {
		display: block !important; position: static !important; float: none !important;
		margin: 0 !important; padding: 0 !important;
		width: auto !important; max-width: none !important; min-height: 0 !important;
		background: none !important; box-shadow: none !important; border: 0 !important;
		overflow: visible !important; transform: none !important;
	}
	.pxs-doc-actions { display: none !important; }
	.pxs-doc { box-shadow: none !important; max-width: none !important; border-radius: 0 !important; padding: 0 !important; }
	/* Nothing splits across a page break mid-item. */
	.pxs-doc-line, .pxs-doc-group, .pxs-doc-totals, .pxs-doc-upsell { break-inside: avoid; page-break-inside: avoid; }
	.pxs-doc-head { break-after: avoid; page-break-after: avoid; }
}

@media (max-width: 640px) {
	/* keep grids in-row on mobile (size 3-up, extras + photos 2-up), just make cards compact so it all fits */
	.pxs-bk-cards-lg { grid-template-columns: repeat(3,1fr); gap: 8px; }
	.pxs-bk-cards-2 { grid-template-columns: 1fr 1fr; gap: 8px; }
	.pxs-bk-upgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
	/* size cards: title + price only, small */
	.pxs-bk-cards-lg .pxs-bk-card-img { aspect-ratio: 1/1; }
	.pxs-bk-cards-lg .pxs-bk-card-main { padding: 8px 9px 0; }
	.pxs-bk-cards-lg .pxs-bk-card-main b { font-size: 13px; }
	.pxs-bk-cards-lg .pxs-bk-card-sub { display: none; }
	.pxs-bk-cards-lg .pxs-bk-card-price { padding: 3px 9px 9px; font-size: 11px; }
	/* extras cards: compact */
	.pxs-bk-card-x .pxs-bk-card-main { padding: 10px 11px 0; }
	.pxs-bk-card-x .pxs-bk-card-main b { font-size: 14px; }
	.pxs-bk-card-x .pxs-bk-card-sub { font-size: 11.5px; }
	.pxs-bk-card-x .pxs-bk-card-price { padding: 4px 11px 11px; font-size: 12px; }
	/* photo cards: compact */
	.pxs-bk-up-title { font-size: 15px; left: 12px; bottom: 10px; }
	.pxs-bk-up-foot { padding: 10px 12px; }
	.pxs-bk-foot { flex-wrap: wrap; }
	.pxs-bk-est { order: -1; flex-basis: 100%; }
}
@media (max-width: 430px) {
	.pxs-bk-form-row { grid-template-columns: 1fr; }
	.pxs-bk-navi-lb { display: none; }
	.pxs-bk-navi { padding: 10px; }
}

/* =========================================================
   MOBILE POLISH
   Two problems this fixes: everything sat too close together, and the
   wizard panel changed height on every step so the step icons under it
   kept jumping. The panel now holds one fixed height, its content
   scrolls inside and stays optically centred, and the icon row never moves.
   ========================================================= */
/* Offer cards: photography full width, staging + floor plans two-up beside it. */
@media (max-width: 920px) {
	.pxs-offer3 { grid-template-columns: 1fr 1fr; gap: 14px; }
	.pxs-offer3 > .pxs-o3-main { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
	/* --- breathing room --- */
	.pxs.pxs-sec { padding: 68px 0; }

	/* Services vs Photography stay clearly separate, with extra air around them */
	.pxs.pxs-services-section { padding: 86px 0; }
	.pxs-photo-head { padding: 54px 0 14px; }
	.pxs-photo-body { padding: 0 0 80px; }
	.pxs-platband { padding: 76px 0 52px; }
	.pxs-plat-h2 { font-size: 1.35rem; margin-bottom: 22px; }
	.pxs-photo-head .pxs-sec-head h2 { font-size: clamp(2.3rem, 9vw, 3rem); }

	/* Type cards: title + eyebrow only, description behind Read more.
	   Centred and tightened. These sat at desktop proportions on a phone and ate
	   most of a screen for three short lines, so the section read as long rather
	   than informative. */
	.pxs-typecards { gap: 10px; margin-bottom: 28px; }
	.pxs-typecard { padding: 13px 14px; text-align: center; align-items: center; border-radius: 14px; }
	.pxs-typecard-eb { font-size: 9.5px; letter-spacing: .1em; }
	.pxs-typecard-h { margin: 5px 0 0; font-size: .94rem; line-height: 1.25; }
	.pxs-typecard p { font-size: 12.5px; line-height: 1.45; }
	/* The toggle is a hint, not a headline: it should never compete with the
	   card's own title for attention. */
	.pxs .pxs-tc-more { display: inline-flex; align-self: center; font-size: 9px; letter-spacing: .09em; margin-top: 6px; gap: 3px; }
	.pxs-tc-more svg { width: 9px; height: 9px; }
	.pxs-typecard .pxs-typecard-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--pxs-ease), opacity .35s; }
	.pxs-typecard .pxs-typecard-body > p { overflow: hidden; }
	.pxs-typecard.pxs-open .pxs-typecard-body { grid-template-rows: 1fr; opacity: 1; margin-top: 6px; }

	/* Pricing tiers: all three sizes have to be comparable in one screen, so the
	   "what you get" list moves behind a toggle. A tier is then a price, a size
	   and a button, which is all that is needed to choose between them.
	   max-height, not grid 0fr: the drop has two children and 0fr collapses only
	   the first row. */
	.pxs-tiers { gap: 12px; max-width: 420px; }
	.pxs-tier-body { padding: 16px 18px 18px; }
	.pxs-tier-eb { margin-bottom: 6px; font-size: 10px; }
	.pxs-tier-pr { font-size: 2rem; }
	.pxs-tier-sz { margin-top: 4px; font-size: 14px; }
	/* What you get stays open on a phone too. Collapsing it kept the three sizes
	   comparable at a glance, but it also hid the answer people are actually
	   comparing, and a list nobody opens is a list nobody reads. */
	.pxs .pxs-tier-more { display: none; }
	.pxs-tier-drop { max-height: none; overflow: visible; opacity: 1; }
	.pxs-tier-shot { margin-top: 12px; border-radius: 12px; }
	.pxs-tier-shot img, .pxs-tier-shot video { height: 132px; }
	.pxs-tier-inc { margin: 10px 0 0; }
	.pxs-tier-inc li { font-size: 13.5px; padding: 9px 0; }
	.pxs-tier-btn { margin-top: 14px; }

	/* before / after: give the section real height so it breathes */
	.pxs.pxs-ba-section { padding: 92px 0 96px; }
	.pxs-ba-section .pxs-sec-head { margin-bottom: 34px; }
	.pxs-ba-section .pxs-slider { margin-top: 18px; }

	.pxs .pxs-wrap { padding-left: 20px; padding-right: 20px; }
	.pxs .pxs-sec-head { margin-bottom: 30px; }
	.pxs .pxs-sec-head h2 { line-height: 1.1; margin-bottom: 14px; }
	.pxs .pxs-sec-head p { line-height: 1.6; }
	.pxs .pxs-eyebrow { margin-bottom: 12px; }
	.pxs-bk-head h2 { line-height: 1.12; }
	.pxs-bk-intro { margin-top: 14px; line-height: 1.6; }
	.pxs-bk-steptitle { line-height: 1.2; }
	.pxs-bk-lede { margin-top: 10px; line-height: 1.6; }
	.pxs-bk-subtitle { margin: 26px 0 14px; }
	.pxs-bk-note { margin-top: 20px; line-height: 1.6; }
	.pxs-bk-panel { padding: 20px 14px 16px; border-radius: 20px; margin-inline: -6px; }
	.pxs-bk-chips { gap: 9px; margin: 14px 0; }
	.pxs-bk-chip { padding: 12px 16px; }
	/* One per row on a phone: two columns cannot hold three platform names
	   without wrapping each into its own line and doubling the card height. */
	.pxs-bk-typegrid { grid-template-columns: 1fr; gap: 10px; }
	.pxs-bk-typegrid .pxs-bk-chip { padding: 13px 40px 13px 14px; }
	.pxs-bk-form { gap: 16px; margin-top: 22px; }

	/* --- the panel grows with its content ---
	   It used to be a fixed height with the body scrolling inside it, which cost
	   two things at once. A step taller than the box got clipped at the bottom,
	   and a step SHORTER than the box had nothing to scroll while
	   overscroll-behavior: contain stopped the gesture reaching the page, so a
	   finger inside the panel simply did nothing. min-height keeps the layout
	   from jumping between steps; nothing scrolls inside any more. */
	.pxs-bk-steps {
		min-height: var(--pxs-bk-h, 360px);
		height: auto;
		display: flex;
		overflow: visible;
	}
	.pxs-bk-step { width: 100%; }
	.pxs-bk-step.is-active { display: flex; flex-direction: column; }
	.pxs-bk-body {
		width: 100%;
		flex: 1 1 auto;
		overflow: visible;
		overscroll-behavior: auto;
	}
	.pxs-bk-success { padding: 10px 4px; }
	/* the foot + the step icons now sit at a constant offset, every step.
	   The estimate gains a second line once a size is picked, which grew the
	   footer by 19px and shunted the icon row down — so reserve both lines. */
	.pxs-bk-foot { margin-top: 16px; padding-top: 14px; }
	.pxs .pxs-bk-next { padding: 11px 20px; font-size: 14px; }
	/* Back is an arrow only: the word cost a whole row on a 360px phone. */
	.pxs .pxs-bk-back {
		width: 42px; height: 42px; padding: 0; border-radius: 100px;
		font-size: 0; display: inline-grid; place-items: center; flex: 0 0 auto;
	}
	.pxs .pxs-bk-back::before {
		content: ''; width: 10px; height: 10px; font-size: 0;
		border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg); margin-left: 3px;
	}
	.pxs-bk-est { min-height: 50px; display: flex; flex-direction: column; justify-content: center; }
	.pxs-bk-nav { margin-top: 18px; gap: 8px; }

	/* The size step used to hold two more questions behind a staged reveal. They
	   are their own steps now, so the stage and its overflow:hidden are gone: the
	   hidden was clipping the note under the cards. */
	.pxs-bk-step[data-step="size"] .pxs-bk-body:not(.pxs-stage-open) { display: flex; flex-direction: column; justify-content: center; }
		/* NOTE: this selector used to repeat .pxs-bk-step[data-step="size"] twice, so it
	   asked for a size step nested inside a size step and never matched. The cards
	   kept the three-column grid while the rules below made each one a ROW with a
	   fixed 122px image, which left no width for the label or the price: the step
	   rendered as three bare photos. */
	.pxs-bk-step[data-step="size"] .pxs-bk-body:not(.pxs-stage-open) .pxs-bk-cards-lg {
		grid-template-columns: 1fr;
		gap: 16px;
		max-width: 360px;
		margin: 26px auto 0;
	}
	.pxs-bk-step[data-step="size"] .pxs-bk-body:not(.pxs-stage-open) .pxs-bk-card { flex-direction: row; align-items: center; border-radius: 20px; }
	.pxs-bk-step[data-step="size"] .pxs-bk-body:not(.pxs-stage-open) .pxs-bk-card-img { flex: 0 0 auto; width: 96px; aspect-ratio: 1; }
	/* The label needs room to sit on two lines, not four: it is the thing being
	   chosen between, so it must read faster than the photo beside it. */
	.pxs-bk-step[data-step="size"] .pxs-bk-body:not(.pxs-stage-open) .pxs-bk-card-main { padding: 0 0 0 14px; flex: 1 1 auto; min-width: 0; }
	.pxs-bk-step[data-step="size"] .pxs-bk-body:not(.pxs-stage-open) .pxs-bk-card-main b { font-size: 16.5px; }
	.pxs-bk-step[data-step="size"] .pxs-bk-body:not(.pxs-stage-open) .pxs-bk-card-sub { display: block; font-size: 12.5px; margin-top: 2px; }
	.pxs-bk-step[data-step="size"] .pxs-bk-body:not(.pxs-stage-open) .pxs-bk-card-price { flex: 0 0 auto; margin: 0 0 0 auto; padding: 0 14px 0 8px; font-size: 12.5px; white-space: nowrap; }
	.pxs-bk-step[data-step="size"] .pxs-bk-body:not(.pxs-stage-open) .pxs-bk-card-sub { font-size: 12px; line-height: 1.35; }
	.pxs-bk-step[data-step="size"] .pxs-bk-body:not(.pxs-stage-open) .pxs-bk-tick { top: 8px; right: 8px; width: 22px; height: 22px; }
	.pxs-bk-step[data-step="size"] .pxs-bk-body:not(.pxs-stage-open) .pxs-bk-steptitle { text-align: center; }

	/* the popup fills the card on a phone, where the tile is small */
	.pxs-bk-upcard .pxs-up-glass-in { padding: 13px 13px; gap: 6px; }
	.pxs-bk-upcard .pxs-up-gtitle { font-size: 14.5px; }
	.pxs-bk-upcard .pxs-up-recap { font-size: 12px; }
	.pxs-bk-upcard .pxs-up-dtl { font-size: 11px; }
}
@media (max-width: 430px) {
	/* Was `height: min(64vh, 500px)`, which survived the switch to an
	   auto-height panel further up and quietly re-capped it: on the widest
	   step the closing price line sat 22px below the box and was cut off.
	   Nothing here may set a height; the panel is as tall as its step. */
	.pxs-bk-steps { min-height: min(64vh, 500px); }
}

/* =========================================================
   Admin preview: neutralise full-bleed and viewport heights so a
   section fits inside the preview box.
   ========================================================= */
.pxs-preview-stage .pxs-fullbleed { width: auto; left: auto; right: auto; margin-left: 0; margin-right: 0; }
.pxs-preview-stage .pxs-hero,
.pxs-preview-stage .pxs-hero.pxs-h-tall,
.pxs-preview-stage .pxs-hero.pxs-h-medium { min-height: 460px; max-height: 640px; }
.pxs-preview-stage.pxs-mobile .pxs-hero { min-height: 560px; max-height: 560px; }
.pxs-preview-stage .pxs-sec { padding: clamp(40px, 6vw, 70px) 0; }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.pxs *, .pxs *::before, .pxs *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.pxs-hero-bg .pxs-slide { transform: none !important; }
	.pxs-reveal { opacity: 1; transform: none; }
	.pxs-js .pxs-anim .pxs-w, .pxs-js .pxs-anim .pxs-c, .pxs-js .pxs-anim .pxs-line {
		opacity: 1 !important; transform: none !important; filter: none !important;
	}
}

/* per-stat mobile visibility (Trust section) */
@media (max-width: 640px) { .pxs-stats .pxs-stat.pxs-hide-m { display: none; } }

/* =====================================================================
 * Portfolio project ( [pixel_project] / [pixel_ba] )
 * Sectioned galleries + before/after, sticky section scroller, lightbox.
 * ===================================================================== */
/* Full width, both ends. The project fills its container instead of sitting in
 * a 1200px box; below the desktop breakpoint (where Avada's side column stacks
 * and there is no fixed furniture to avoid) it breaks out to the true viewport
 * edge. --pxs-gut is both the outer gutter and the masonry gap, so the edges
 * read as deliberate rather than as an accident. */
.pxs-project {
	/* Tight gutter on purpose: at 16px the photographs read as separate cards.
	 * Closed up to 6-10px they read as one continuous field of imagery, which is
	 * how a contact sheet — and every gallery worth copying — behaves. --pxs-edge
	 * is the outer margin, kept to zero on phones so the work runs to the glass. */
	--pxs-gut: clamp(6px, 0.7vw, 10px);
	--pxs-edge: 0px;
	/* Images run to the screen edge on a phone; type must not. --pxs-tx is the
	 * inset for words only, and drops to 0 once --pxs-edge does the job. */
	--pxs-tx: 16px;
	width: 100%; max-width: none; margin: 0; box-sizing: border-box;
	padding: clamp(14px, 3vw, 28px) var(--pxs-edge) clamp(48px, 9vw, 110px);
	color: var(--pxs-ink); font-family: var(--pxs-sans);
}
@media (min-width: 701px) { .pxs-project { --pxs-edge: clamp(14px, 2.2vw, 34px); --pxs-tx: 0px; } }
@media (max-width: 1000px) {
	.pxs-project { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}
.pxs-project-solo { padding-top: 0; padding-bottom: 0; }
/* The description now closes the page, after the last gallery. */
.pxs-pf-intro { max-width: 620px; margin: clamp(56px, 9vw, 112px) auto 0; padding-inline: var(--pxs-tx); text-align: center; }
.pxs-pf-intro p { font-family: var(--pxs-body); font-size: clamp(15.5px, 1.35vw, 17.5px); line-height: 1.72; color: var(--pxs-ink2); margin: 0; text-wrap: pretty; }

/* Sticky section scroller */
/* Slim index bar. Quieter than before: a hairline rule instead of a heavy
 * border, and chips that sit on the page rather than on white cards. */
.pxs-pf-scroller { position: sticky; top: 0; z-index: 20; margin: 0 0 clamp(26px, 4vw, 48px); background: color-mix(in srgb, var(--pxs-bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--pxs-ink) 12%, transparent); }
.pxs-pf-scroller-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--pxs-tx); scroll-snap-type: x proximity; }
.pxs-pf-scroller-in::-webkit-scrollbar { display: none; }
.pxs-pf-chip { flex: 0 0 auto; scroll-snap-align: start; font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--pxs-grey); text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 1px solid transparent; background: none; transition: color .2s, background .2s, border-color .2s; white-space: nowrap; }
.pxs-pf-chip:hover { color: var(--pxs-ink); border-color: color-mix(in srgb, var(--pxs-ink) 22%, transparent); }
.pxs-pf-chip.is-active { background: var(--pxs-ink); color: var(--pxs-white); border-color: var(--pxs-ink); }
/* The plan is a different kind of destination, so it sits apart from the rooms. */
.pxs-pf-chip-plan { margin-left: auto; }

/* Side rail on desktop */
@media (min-width: 981px) {
	.pxs-scroller-side .pxs-project { max-width: 1320px; }
	.pxs-scroller-side { display: grid; }
	.pxs-scroller-side .pxs-pf-scroller { position: sticky; top: 90px; z-index: 20; grid-column: 1; float: left; width: 190px; margin: 0; background: none; backdrop-filter: none; border: 0; }
	.pxs-scroller-side .pxs-pf-scroller-in { flex-direction: column; overflow: visible; padding: 0; gap: 6px; }
	.pxs-scroller-side .pxs-pf-body { margin-left: 226px; }
}

/* Sections.
 * NOTE: content-visibility used to live here with contain-intrinsic-size:
 * auto 680px. A single length applies to BOTH axes, so every off-screen
 * section forced its parent to 680px — inside Avada's 350px mobile column
 * that pushed the gallery off the right edge and clipped ~40% of every
 * photo. Do not reintroduce it without a per-axis value. */
/* Each room is a chapter: generous air BETWEEN sections, the heading held tight
 * to the photographs it introduces. */
.pxs-pf-sec { margin: 0 0 clamp(52px, 8vw, 104px); scroll-margin-top: 64px; }
.pxs-pf-sec:last-child { margin-bottom: 0; }

/* Section header — room name left, frame count right, hairline rule above.
 * The mono face is the brand's technical voice, so it carries the metadata. */
.pxs-pf-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
	margin: 0 0 clamp(14px, 1.8vw, 22px);
	padding: clamp(12px, 1.6vw, 20px) var(--pxs-tx) 0;
	border-top: 1px solid color-mix(in srgb, var(--pxs-ink) 14%, transparent);
}
/* Avada sizes headings from .fusion-responsive-typography-calculated with
   !important and capitalises them, which put "More projects" on the live site at
   96px reading "More Projects". Scoped !important is the only thing that wins. */
.pxs-pf-h {
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(19px, 2.1vw, 27px) !important; line-height: 1.05 !important;
	letter-spacing: -.025em; margin: 0; color: var(--pxs-ink); text-align: left;
	text-transform: none !important;
}
.pxs-pf-meta {
	flex: 0 0 auto; font-family: var(--pxs-mono); font-size: 10.5px;
	letter-spacing: .13em; text-transform: uppercase;
	color: var(--pxs-faint); white-space: nowrap;
}
/* The accent earns exactly one appearance in the gallery: the lead section. */
.pxs-pf-head-lead { border-top-color: var(--pxs-ink); }
/* ...except when it is the first thing on the page. A near-black hairline right
   under the floating nav reads as a stray bar rather than as the top of a
   section, because there is nothing above it to separate it from. */
.pxs-project > .pxs-pf-lang + .pxs-pf-head,
.pxs-project > .pxs-pf-head:first-child,
.pxs-pf-head-lead:first-of-type { border-top: 0; padding-top: 0; }
.pxs-pf-head-lead .pxs-pf-meta { color: var(--pxs-accent); }

/* Galleries — always masonry, never cropped.
 * Row-span masonry (not CSS columns) so reading order stays left-to-right and
 * the best photo genuinely leads. Each item carries its real aspect-ratio from
 * the server, so the layout is correct before JS refines the spans. */
/* Scoped to .pxs-project on purpose: the home page's featured-work section
 * reuses .pxs-pf-grid (with .pxs-pf-card children, defined much earlier in this
 * file). Unscoped, these rules win on source order and silently rework that
 * grid's columns and gap. */
.pxs-project .pxs-pf-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pxs-gut, 12px);
	align-items: start;
}
.pxs-project .pxs-pf-grid.pxs-masonry { grid-auto-rows: 4px; row-gap: 0; }
.pxs-project .pxs-pf-grid.pxs-masonry > .pxs-pf-item { aspect-ratio: auto !important; }
@media (min-width: 601px)  { .pxs-project .pxs-pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1500px) { .pxs-project .pxs-pf-grid { grid-template-columns: repeat(3, 1fr); } }
/* Photographs are not UI. The site's 26px radius makes an interior shot read as
 * a card; square edges let it read as an image. The rounded language survives in
 * the chrome around it — chips, buttons, the plan panel — and that contrast is
 * the point rather than an inconsistency. */
.pxs-pf-item { margin: 0; border-radius: 0; overflow: hidden; background: color-mix(in srgb, var(--pxs-ink) 8%, var(--pxs-bg)); }
.pxs-pf-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.pxs-project .pxs-pf-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A hairline inside the frame keeps pale photographs from bleeding into the
 * page background where they meet it. */
.pxs-project .pxs-pf-item { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pxs-ink) 6%, transparent); }

/* Lazy fade-in (only applied by JS, so no-JS shows images normally) */
.pxs-lazyimg.pxs-preload { opacity: 0; }
.pxs-lazyimg.pxs-loaded { opacity: 1; transition: opacity .5s ease; }

/* Before/after inside a project */
.pxs-pf-ba { margin: 0 auto; }
.pxs-pf-ba .pxs-slider { margin: 0 auto; }
.pxs-pf-ba-feature { width: 100%; }
.pxs-pf-ba-feature .pxs-slider { aspect-ratio: 16 / 10; border-radius: var(--pxs-r); }
.pxs-pf-ba-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; font-family: var(--pxs-sans); font-weight: 700; font-size: clamp(24px, 5vw, 52px); color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.4); pointer-events: none; letter-spacing: -.01em; }

/* Lightbox */
.pxs-lb { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(12,12,14,.92); opacity: 0; transition: opacity .25s ease; }
.pxs-lb.is-open { display: flex; opacity: 1; }
.pxs-lb-img { max-width: 94vw; max-height: 90vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 80px rgba(0,0,0,.5); }
.pxs-lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.pxs-lb-btn:hover { background: rgba(255,255,255,.25); }
.pxs-lb-prev { left: 3vw; } .pxs-lb-next { right: 3vw; }
.pxs-lb-close { top: 18px; right: 18px; transform: none; width: 44px; height: 44px; font-size: 22px; }
/* Position in the set. Without it nothing says a second image exists, which is
   the whole reason someone opened the viewer from a strip. */
.pxs-lb-count {
	position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
	font-family: var(--pxs-mono); font-size: 12.5px; letter-spacing: .06em;
	color: rgba(255,255,255,.8); background: rgba(255,255,255,.12);
	border-radius: 999px; padding: 6px 13px;
}
.pxs-lb-count b { font-weight: 500; color: #fff; }
.pxs-lb-count i { font-style: normal; }
.pxs-lb.is-one .pxs-lb-count, .pxs-lb.is-one .pxs-lb-prev, .pxs-lb.is-one .pxs-lb-next { display: none; }
@media (max-width: 640px) {
	.pxs-lb-prev { left: 6px; } .pxs-lb-next { right: 6px; } .pxs-lb-btn { width: 44px; height: 44px; }
	.pxs-lb-img { max-height: 78vh; }
	.pxs-lb-count { bottom: 14px; }
}

/* Highlights — the 2–6 best shots.
 * These are the photos that sell the shoot, so they are NEVER cropped: the
 * block reuses the gallery's row-span masonry and every image keeps its own
 * proportions. Hierarchy comes from the lead running full width rather than
 * from forcing anything into a square. */
.pxs-pf-highlights { margin-bottom: clamp(34px, 5vw, 62px); }
.pxs-pf-hero-i { margin: 0; border-radius: var(--pxs-r); overflow: hidden; background: var(--pxs-grey); }
/* No full-width lead here on purpose. Keeping the true aspect ratio AND making
 * the first shot span every column produced a ~1900px block that pushed the
 * first room section 2800px down the page. Equal treatment keeps the set
 * compact and scannable; the heading is what marks it as the highlights. */

/* Floor plan — a drawing, not a photograph, so it keeps the rounded panel and
 * sits on white. This is the one place the page deliberately breathes. */
.pxs-pf-plan-in { display: flex; flex-direction: column; gap: var(--pxs-gut, 10px); align-items: center; }
.pxs-pf-plan-fig { margin: 0; width: 100%; max-width: 940px; background: var(--pxs-white, #fff); border-radius: var(--pxs-r); padding: clamp(18px, 3vw, 44px); box-sizing: border-box; box-shadow: 0 30px 80px -60px rgba(0,0,0,.5); }
.pxs-pf-plan-fig .pxs-pf-open { cursor: zoom-in; }
.pxs-project .pxs-pf-plan-fig .pxs-pf-img { width: 100%; height: auto; object-fit: contain; }
.pxs-pf-chip-plan { display: inline-flex; align-items: center; gap: 7px; }
.pxs-pf-chip-plan svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: .75; }

/* Closing note. A mono eyebrow marks it as an aside rather than a headline, and
 * the measure is held narrow so it reads as writing, not as a block of page. */
.pxs-pf-eyebrow { display: block; font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pxs-faint); margin: 0 0 14px; }

/* Portfolio: language switcher + conversion CTA */
.pxs-pf-lang { display: flex; gap: 8px; align-items: center; justify-content: flex-end; font-family: var(--pxs-mono); font-size: 12px; letter-spacing: .06em; margin: 0 0 8px; color: var(--pxs-faint); }
.pxs-pf-lang-a { text-decoration: none; color: var(--pxs-ink2); padding: 3px 6px; border-radius: 6px; }
.pxs-pf-lang-a:hover { color: var(--pxs-ink); }
.pxs-pf-lang-a.is-active { color: var(--pxs-white); background: var(--pxs-ink); }
/* The close. Deliberately NOT a filled block: the site footer directly below is
 * already ink, and two dark masses separated by a strip of page read as a
 * mistake. A rule and large tight type carry it, and the button is the only
 * colour in the whole gallery besides the highlights count. */
.pxs-pf-cta { margin: clamp(56px, 9vw, 112px) 0 0; text-align: center; padding: clamp(44px, 7vw, 92px) var(--pxs-tx) clamp(12px, 2vw, 24px); border-radius: 0; background: none; border-top: 1px solid color-mix(in srgb, var(--pxs-ink) 14%, transparent); }
.pxs-pf-cta-t { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(23px, 3.2vw, 40px); letter-spacing: -.03em; line-height: 1.1; margin: 0 auto clamp(22px, 2.8vw, 34px); max-width: 15ch; color: var(--pxs-ink); text-wrap: balance; }
.pxs-pf-cta-b { font-family: var(--pxs-sans); }

/* Portfolio index grid + related projects */
.pxs-pgrid-wrap { max-width: 1200px; margin: 0 auto; padding: clamp(18px, 4vw, 40px) clamp(14px, 4vw, 28px); font-family: var(--pxs-sans); color: var(--pxs-ink); }
.pxs-pgrid-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 clamp(18px, 3vw, 30px); }
.pxs-pgrid-chip { font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--pxs-ink2); padding: 8px 15px; border-radius: 999px; border: 1px solid var(--pxs-faint); background: var(--pxs-white); cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.pxs-pgrid-chip:hover { border-color: var(--pxs-ink2); color: var(--pxs-ink); }
.pxs-pgrid-chip.is-active { background: var(--pxs-ink); color: var(--pxs-white); border-color: var(--pxs-ink); }
.pxs-pgrid { display: grid; gap: clamp(10px, 1.6vw, 20px); }
.pxs-pgrid-c2 { grid-template-columns: repeat(2, 1fr); }
.pxs-pgrid-c3 { grid-template-columns: repeat(3, 1fr); }
.pxs-pgrid-c4 { grid-template-columns: repeat(4, 1fr); }
.pxs-pcard { display: block; text-decoration: none; color: var(--pxs-ink); border-radius: var(--pxs-r); overflow: hidden; background: var(--pxs-grey); border: 1px solid var(--pxs-faint); transition: transform .3s var(--pxs-ease), box-shadow .3s var(--pxs-ease); }
.pxs-pcard:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.pxs-pcard-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.pxs-pcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--pxs-ease); }
.pxs-pcard:hover .pxs-pcard-img img { transform: scale(1.04); }
.pxs-pcard-t { display: block; padding: 12px 14px 14px; font-weight: 600; font-size: 15px; }
/* Aligned with the galleries above rather than centred in its own narrower box,
 * so the page keeps one left edge from the first photo to the last card. */
.pxs-related { max-width: none; margin: clamp(56px, 9vw, 112px) 0 0; }
.pxs-project .pxs-related .pxs-pgrid { gap: var(--pxs-gut); }
/* Cards follow the photographs: square, flat, no hover motion. The title sits
 * under the image as a caption instead of on a filled bar. */
.pxs-project .pxs-pcard { border-radius: 0; border: 0; background: none; }
.pxs-project .pxs-pcard-img { border-radius: 0; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--pxs-ink) 8%, var(--pxs-bg)); }
.pxs-project .pxs-pcard-t { padding: 10px 0 0; font-family: var(--pxs-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--pxs-grey); }
@media (max-width: 700px) { .pxs-pgrid-c2, .pxs-pgrid-c3, .pxs-pgrid-c4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .pxs-pgrid-c2, .pxs-pgrid-c3, .pxs-pgrid-c4 { grid-template-columns: 1fr; } }

/* Smoother, less snappy hover on gallery + project cards */
/* No hover motion anywhere in the portfolio — scrolling past a gallery should
 * be completely still. Only the cursor signals that a photo is clickable. */
.pxs-pf-img,
.pxs-pf-open:hover .pxs-pf-img,
.pxs-pcard,
.pxs-pcard:hover,
.pxs-pcard-img img,
.pxs-pcard:hover .pxs-pcard-img img {
	transform: none;
	transition: none;
}
.pxs-pcard:hover { box-shadow: none; }

/* =====================================================================
 * Avada / Fusion Builder compatibility.
 * When our full-bleed sections are dropped inside Fusion columns or
 * containers, those wrappers add padding, drop-shadows, rounded corners,
 * a background and a max-width — which traps the sections as inset "boxes"
 * (very visible on mobile). Strip the wrapper styling wherever it directly
 * holds one of our sections, so the sections render edge-to-edge as designed.
 * Uses :has() (all current browsers) and only affects wrappers around .pxs.
 * ===================================================================== */
.fusion-column-wrapper:has(> .pxs),
.fusion-column-wrapper:has(> .fusion-text > .pxs),
.fusion-layout-column:has(.pxs),
.fusion-builder-row:has(.pxs),
.fusion-row:has(.pxs),
.fusion-fullwidth:has(.pxs),
.fullwidth-box:has(.pxs) {
	padding: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: 100% !important;
	box-shadow: none !important;
	background: none !important;
	border-radius: 0 !important;
	border: 0 !important;
}
.fusion-fullwidth:has(.pxs),
.fusion-row:has(.pxs) { overflow-x: clip; }
/* The text wrapper Fusion puts a shortcode in shouldn't add spacing either. */
.fusion-text:has(> .pxs) { margin: 0 !important; padding: 0 !important; }

/* Project pages sit deeper in the Avada tree than the section shortcodes do,
 * and the wrappers that squeeze them are ANCESTORS rather than direct parents,
 * so the :has(> .pxs) rules above never reach them. Measured on the live DOM of
 * /project/unique-airbnb/ at 1440px, the gallery lost 118px to <main>'s 30px
 * padding + 10px margin and another 38px to an outer column-wrapper's margins.
 * Scoped to .pxs-project so only project pages are affected. */
/* The `body ` prefix is deliberate: Avada caps .fusion-builder-row.fusion-row at
 * the site width with the same specificity as a bare :has() selector, and its
 * stylesheet loads after ours, so an unprefixed rule silently loses. */
body main:has(.pxs-project),
body article:has(.pxs-project),
body .fusion-content-tb:has(.pxs-project),
body .post-content:has(.pxs-project),
body .fusion-column-wrapper:has(.pxs-project),
body .fusion-layout-column:has(.pxs-project),
body .fusion-builder-row:has(.pxs-project),
body .fusion-row:has(.pxs-project),
body .fusion-fullwidth:has(.pxs-project),
body .fullwidth-box:has(.pxs-project) {
	padding-left: 0 !important; padding-right: 0 !important;
	margin-left: 0 !important; margin-right: 0 !important;
	max-width: none !important; width: 100% !important;
	box-shadow: none !important; border-radius: 0 !important;
	/* Avada caps its rows with max-width: var(--site_width) from a rule we cannot
	 * reliably outrank. Redefining the variable on the element that consumes it
	 * wins without any specificity contest. */
	--site_width: 100%;
}

/* =====================================================================
 * Floor plans page ( [pixel_floorplans] )
 * Same language as the portfolio galleries: hairline rules, mono metadata,
 * hard-edged imagery, and the accent spent in exactly two places (the price
 * and the button). The product here is a drawing, so it sits on white panels
 * rather than bleeding to the page edge like photographs do.
 * ===================================================================== */
.pxs-fp {
	--pxs-fp-gut: clamp(14px, 2.4vw, 34px);
	color: var(--pxs-ink); font-family: var(--pxs-sans);
	background: var(--pxs-bg);
	/* Block themes cap every direct child of .is-layout-constrained at the
	   content size (645px in TT5) via a :where() rule, which has zero
	   specificity — this single class beats it. Avada caps the same thing a
	   different way, handled in the Fusion compat block above. */
	max-width: none; width: 100%;
}
.pxs-fp-band { padding: clamp(48px, 8vw, 104px) 0; }
.pxs-fp-band + .pxs-fp-band { padding-top: 0; }

/* "What you get" answers a different question from "look at a plan", and the
   rule above makes consecutive bands run together on one surface — so it read
   as more of the viewer rather than the next thing. Its own tone, and its top
   padding back, so the break is unmistakable. */
.pxs-fp-deliver { background: var(--pxs-bg2); }
.pxs-fp-band + .pxs-fp-deliver,
.pxs-fp-deliver + .pxs-fp-band { padding-top: clamp(48px, 8vw, 104px); }
.pxs-fp-in { max-width: 1180px; margin: 0 auto; padding: 0 var(--pxs-fp-gut); }

/* ---------------------------------------------------------------------------
   Intro with a looping plan behind it.
   The clip is decoration: the scrim keeps text contrast fixed no matter which
   frame is showing, so the heading never depends on the video's brightness. */
.pxs-fp-intro.has-video { position: relative; isolation: isolate; overflow: hidden; }
.pxs-fp-intro.has-video .pxs-fp-in { position: relative; z-index: 1; }
.pxs-fp-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pxs-fp-hero-vid,
.pxs-fp-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs-fp-hero-scrim {
	position: absolute; inset: 0;
	/* Denser on the left where the text sits, so the plan stays readable right. */
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--pxs-bg) 92%, transparent) 0%,
		                        color-mix(in srgb, var(--pxs-bg) 72%, transparent) 46%,
		                        color-mix(in srgb, var(--pxs-bg) 40%, transparent) 100%),
		linear-gradient(0deg, color-mix(in srgb, var(--pxs-bg) 55%, transparent), transparent 55%);
}
@media (max-width: 700px) {
	/* Taller than wide, so the section has room to breathe instead of reading as
	   a square band. 4:5 is the floor; the content pushes it further if it needs. */
	.pxs-fp-intro.has-video {
		min-height: 125vw;
		display: flex; flex-direction: column; justify-content: center;
	}
	/* The copy keeps the left, the plan stays visible on the right. */
	.pxs-fp-intro.has-video .pxs-fp-lede { max-width: 62%; }

	/* Which means the wash goes back to horizontal: dense behind the text, clear
	   over the plan. Flattening it vertically only made sense while the text ran
	   the full width. */
	.pxs-fp-hero-scrim {
		background:
			linear-gradient(90deg,
				color-mix(in srgb, var(--pxs-bg) 94%, transparent) 0%,
				color-mix(in srgb, var(--pxs-bg) 82%, transparent) 58%,
				color-mix(in srgb, var(--pxs-bg) 34%, transparent) 100%),
			linear-gradient(0deg, color-mix(in srgb, var(--pxs-bg) 50%, transparent), transparent 42%);
	}
}

/* The comparison needs to announce itself. Without a heading and its own ground
   it read as two more plans in a page already full of plans. */
.pxs-fp .pxs-fp-compare {
	background: color-mix(in srgb, var(--pxs-ink) 5%, var(--pxs-bg));
	padding-block: clamp(40px, 6vw, 84px);
}
.pxs-fp-head-c { justify-content: center; text-align: center; border-top: 0; padding-top: 0; }
.pxs-fp-head-c h2 { margin-top: 6px; }

/* An add-on that is easier to show than to describe gets a thumbnail on its row.
   It is a button inside a label, so the click must not also tick the checkbox. */
.pxs-fp-addon-shot {
	flex: 0 0 auto; position: relative; display: block;
	width: 74px; height: 50px; padding: 0; border: 0; cursor: pointer;
	border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.06);
	margin-right: 4px;
}
.pxs-fp-addon-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs-fp-addon-shot span {
	position: absolute; inset: auto 0 0 0;
	font-family: var(--pxs-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase;
	background: rgba(17,15,14,.78); color: #fff; padding: 3px 0; text-align: center;
}
.pxs-fp-addon-shot:hover img { transform: scale(1.05); transition: transform .3s var(--pxs-ease); }
.pxs-fp-addon-modal .pxs-modal-box { max-width: 1120px; }
.pxs-fp-addon-modal .pxs-modal-media img { width: 100%; height: auto; display: block; border-radius: 10px; }
@media (max-width: 640px) {
	.pxs-fp-addon-shot { width: 60px; height: 42px; }
	.pxs-fp-addon-shot span { font-size: 7.5px; }
}

/* Figures fading in over the hero clip, one after another. The clip is moving,
   so each one arrives on its own and then simply stays: anything that also moves
   would be unreadable against a camera that is already drifting. */
.pxs-fp-heromarks { position: absolute; inset: 0; pointer-events: none; }
.pxs-fp-heromark {
	position: absolute; transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	display: flex; flex-direction: column; align-items: center; gap: 1px;
	padding: 8px 13px; border-radius: 11px; white-space: nowrap;
	background: rgba(17, 15, 14, .74);
	backdrop-filter: blur(4px);
	color: #fff; text-align: center;
	box-shadow: 0 10px 26px -14px rgba(0,0,0,.7);
	opacity: 0;
	animation: pxs-fp-markin .9s cubic-bezier(.22,1.15,.36,1) var(--pxs-d, 1s) forwards;
}
.pxs-fp-heromark b { font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px; letter-spacing: -.01em; }
.pxs-fp-heromark i { font-style: normal; font-family: var(--pxs-mono); font-size: 12.5px; color: var(--pxs-accent); }
/* A measurement appearing should feel like it snapped into place on the room it
   describes — so it overshoots slightly and settles, rather than sliding in. */
@keyframes pxs-fp-markin {
	0%   { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.78); }
	55%  { opacity: 1; transform: translate(-50%, calc(-50% - 2px)) scale(1.06); }
	78%  { transform: translate(-50%, -50%) scale(.985); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.pxs-fp-heromark { animation: none; opacity: 1; }
}
@media (max-width: 640px) {
	/* Only the first two survive on a phone; the rest would stack on the heading. */
	.pxs-fp-heromark { padding: 6px 10px; border-radius: 9px; }
	.pxs-fp-heromark b { font-size: 11.5px; }
	.pxs-fp-heromark i { font-size: 11px; }
	.pxs-fp-heromark:nth-child(n+3) { display: none; }
}

/* ---------------------------------------------------------------------------
   Explorable plan. Framed, labelled and set apart, because a plan sitting in a
   box on a page of plans does not look interactive. The tag says what it is
   before anyone tries to drag it. */
/* The whole section is white, edge to edge. The page ground is a warm grey, so
   a white band is the clearest possible "this is a different thing" on both
   desktop and mobile, and it is what makes the viewer read as its own tool
   rather than as one more figure in the flow. */
.pxs-fp .pxs-fp-zoom {
	background: #fff;
	padding-block: clamp(48px, 7vw, 100px);
}
.pxs-fp-zoomwrap {
	position: relative; margin-top: clamp(14px, 2vw, 22px);
	border: 1px solid color-mix(in srgb, var(--pxs-ink) 14%, transparent);
	border-radius: 18px; overflow: hidden;
	/* Grey surface inside a white section, so the frame still reads as a stage. */
	background: color-mix(in srgb, var(--pxs-ink) 6%, #fff);
	box-shadow: 0 26px 60px -46px rgba(0,0,0,.4);
}
.pxs-fp-zoomtag {
	position: absolute; left: clamp(12px, 2vw, 20px); top: clamp(12px, 2vw, 20px); z-index: 3;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 13px; border-radius: 999px;
	background: var(--pxs-ink); color: #fff;
	font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
	pointer-events: none;
}
.pxs-fp-zoomtag svg { width: 13px; height: 13px; }
.pxs-fp-stage {
	position: relative;
	overflow: hidden;
	background: color-mix(in srgb, var(--pxs-ink) 5%, transparent);
	cursor: grab;
	touch-action: pan-y; /* vertical page scroll stays with the page */
	/* Desktop: a wide letterbox suits a plan that is far wider than it is tall. */
	aspect-ratio: 21 / 8;
	max-height: 78vh;
}
.pxs-fp-stage.is-pannable { touch-action: none; }
/* The opening close-up is zoomed in, so the stage counts as pannable before
   anyone has asked to pan it. Scrolling the page past it has to keep working. */
.pxs-fp-stage.pxs-introing { touch-action: pan-y !important; }
.pxs-fp-stage:not(.is-pannable) { cursor: default; }
.pxs-fp-stage.is-grabbing { cursor: grabbing; }
.pxs-fp-stage:focus-visible { outline: 2px solid var(--pxs-accent); outline-offset: -4px; }
/* `.pxs img { max-width: 100% }` (0,1,1) outranks a lone class (0,1,0), so this
   needs the element in the selector or the plan is capped at frame width and the
   transform scales an already-shrunken box. */
.pxs img.pxs-fp-zoomimg {
	position: absolute; top: 0; left: 0;
	max-width: none; max-height: none;
	transform-origin: 0 0;
	will-change: transform;
	user-select: none; -webkit-user-drag: none;
}

/* The layer holds the plan and its labels together, so one transform moves both. */
.pxs-fp-zoomlayer { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.pxs .pxs-fp-zoomlayer .pxs-fp-zoomimg { position: absolute; top: 0; left: 0; transform: none; }

/* Measurements are off until asked for: a plan covered in numbers is harder to
   read than one without, and the point of the toggle is that you choose. */
.pxs-fp-marks { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--pxs-ease); }
.pxs-fp-zoomwrap.is-measured .pxs-fp-marks { opacity: 1; }
.pxs-fp-mark {
	position: absolute;
	/* --pxs-mark-inv is 1/scale, set by the viewer on every paint, so the label
	   keeps one size on screen while its POSITION still tracks the plan. */
	transform: translate(-50%, -50%) scale(var(--pxs-mark-inv, 1));
	transform-origin: 50% 50%;
	display: flex; flex-direction: column; align-items: center; gap: 1px;
	padding: 7px 11px; border-radius: 10px; white-space: nowrap;
	background: rgba(17, 15, 14, .82);
	backdrop-filter: blur(3px);
	color: #fff; text-align: center;
	box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
}
.pxs-fp-mark b { font-family: var(--pxs-sans); font-weight: 600; font-size: 13px; letter-spacing: -.01em; }
.pxs-fp-mark i { font-style: normal; font-family: var(--pxs-mono); font-size: 12px; color: var(--pxs-accent); }
.pxs-fp-mark em { font-style: normal; font-family: var(--pxs-mono); font-size: 10.5px; color: rgba(255,255,255,.72); }

/* Floor and total, pinned to the frame rather than the plan: it describes the
   whole drawing, so it should not slide away when you pan. */
.pxs-fp-totalbadge {
	position: absolute; left: clamp(12px, 2vw, 20px); bottom: clamp(12px, 2vw, 20px); z-index: 3;
	display: none; flex-direction: column; gap: 2px;
	padding: 9px 14px; border-radius: 12px;
	background: rgba(17, 15, 14, .86); backdrop-filter: blur(4px); color: #fff;
	pointer-events: none;
}
.pxs-fp-zoomwrap.is-measured .pxs-fp-totalbadge { display: flex; }
.pxs-fp-totalbadge b { font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px; }
.pxs-fp-totalbadge i { font-style: normal; font-family: var(--pxs-mono); font-size: 12.5px; color: var(--pxs-accent); }

/* The measurements toggle is a labelled control, not an icon: nobody guesses a
   ruler glyph. It sits with the zoom controls and lights up when it is on. */
/* The base control is a 34px grid cell, which stacks an icon over a label and
   pushes the text straight out of the pill. This variant has to lay out as a row. */
.pxs .pxs-fp-zmeasure {
	display: inline-flex; align-items: center; justify-content: center;
	width: auto; min-width: 0; height: 34px;
	gap: 6px; padding: 0 13px 0 11px; border-radius: 999px;
	white-space: nowrap; flex: 0 0 auto;
}
.pxs .pxs-fp-zmeasure svg { flex: 0 0 auto; }
.pxs-fp-zmeasure span { font-family: var(--pxs-sans); font-weight: 600; font-size: 12.5px; }
.pxs-fp-zoomwrap.is-measured .pxs-fp-zmeasure { background: var(--pxs-accent); color: #fff; }

@media (max-width: 640px) {
	.pxs-fp-mark { padding: 5px 8px; border-radius: 8px; }
	.pxs-fp-mark b { font-size: 11.5px; }
	.pxs-fp-mark i { font-size: 10.5px; }
	.pxs-fp-mark em { font-size: 9.5px; }
	.pxs .pxs-fp-zmeasure { height: 38px; padding: 0 11px 0 9px; gap: 5px; }
	.pxs-fp-zmeasure span { font-size: 11.5px; }
	/* The control bar spans the bottom on a phone, so the floor badge cannot stay
	   down there. Top right, opposite the viewer tag. */
	.pxs-fp-totalbadge { left: auto; right: 10px; bottom: auto; top: 10px; padding: 7px 11px; }
}

.pxs-fp-zoomctl {
	position: absolute; right: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px);
	display: flex; align-items: center; gap: 4px;
	padding: 5px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pxs-bg) 88%, transparent);
	backdrop-filter: blur(10px);
	border: 1px solid color-mix(in srgb, var(--pxs-ink) 12%, transparent);
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
}
.pxs-fp-zbtn {
	display: grid; place-items: center;
	width: 34px; height: 34px; padding: 0;
	border: 0; border-radius: 999px;
	background: transparent; color: var(--pxs-ink);
	cursor: pointer;
	transition: background .18s var(--pxs-ease), color .18s var(--pxs-ease);
}
.pxs-fp-zbtn svg { width: 17px; height: 17px; }
.pxs-fp-zbtn:hover { background: color-mix(in srgb, var(--pxs-ink) 8%, transparent); }
.pxs-fp-zbtn:focus-visible { outline: 2px solid var(--pxs-accent); outline-offset: 2px; }
.pxs-fp-zlevel {
	min-width: 46px; text-align: center;
	font-family: var(--pxs-mono); font-size: 11.5px; letter-spacing: .04em;
	color: var(--pxs-grey);
	font-variant-numeric: tabular-nums;
}
.pxs-fp-zfull { text-decoration: none; }

/* Full screen: the frame becomes the window, so drop the letterbox ratio. */
.pxs-fp-zoomwrap.is-full { background: var(--pxs-bg); display: grid; }
.pxs-fp-zoomwrap.is-full .pxs-fp-stage {
	aspect-ratio: auto; max-height: none; height: 100vh; border: 0;
}

@media (max-width: 700px) {
	/* Phones get a tall frame: a 3.5:1 plan in a letterbox would be a hairline. */
	.pxs-fp-stage { aspect-ratio: 3 / 4; max-height: 70vh; }
	/* The layer holds the plan and its labels together, so one transform moves both. */
.pxs-fp-zoomlayer { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.pxs .pxs-fp-zoomlayer .pxs-fp-zoomimg { position: absolute; top: 0; left: 0; transform: none; }

/* Measurements are off until asked for: a plan covered in numbers is harder to
   read than one without, and the point of the toggle is that you choose. */
.pxs-fp-marks { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--pxs-ease); }
.pxs-fp-zoomwrap.is-measured .pxs-fp-marks { opacity: 1; }
.pxs-fp-mark {
	position: absolute;
	/* --pxs-mark-inv is 1/scale, set by the viewer on every paint, so the label
	   keeps one size on screen while its POSITION still tracks the plan. */
	transform: translate(-50%, -50%) scale(var(--pxs-mark-inv, 1));
	transform-origin: 50% 50%;
	display: flex; flex-direction: column; align-items: center; gap: 1px;
	padding: 7px 11px; border-radius: 10px; white-space: nowrap;
	background: rgba(17, 15, 14, .82);
	backdrop-filter: blur(3px);
	color: #fff; text-align: center;
	box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
}
.pxs-fp-mark b { font-family: var(--pxs-sans); font-weight: 600; font-size: 13px; letter-spacing: -.01em; }
.pxs-fp-mark i { font-style: normal; font-family: var(--pxs-mono); font-size: 12px; color: var(--pxs-accent); }
.pxs-fp-mark em { font-style: normal; font-family: var(--pxs-mono); font-size: 10.5px; color: rgba(255,255,255,.72); }

/* Floor and total, pinned to the frame rather than the plan: it describes the
   whole drawing, so it should not slide away when you pan. */
.pxs-fp-totalbadge {
	position: absolute; left: clamp(12px, 2vw, 20px); bottom: clamp(12px, 2vw, 20px); z-index: 3;
	display: none; flex-direction: column; gap: 2px;
	padding: 9px 14px; border-radius: 12px;
	background: rgba(17, 15, 14, .86); backdrop-filter: blur(4px); color: #fff;
	pointer-events: none;
}
.pxs-fp-zoomwrap.is-measured .pxs-fp-totalbadge { display: flex; }
.pxs-fp-totalbadge b { font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px; }
.pxs-fp-totalbadge i { font-style: normal; font-family: var(--pxs-mono); font-size: 12.5px; color: var(--pxs-accent); }

/* The measurements toggle is a labelled control, not an icon: nobody guesses a
   ruler glyph. It sits with the zoom controls and lights up when it is on. */
/* The base control is a 34px grid cell, which stacks an icon over a label and
   pushes the text straight out of the pill. This variant has to lay out as a row. */
.pxs .pxs-fp-zmeasure {
	display: inline-flex; align-items: center; justify-content: center;
	width: auto; min-width: 0; height: 34px;
	gap: 6px; padding: 0 13px 0 11px; border-radius: 999px;
	white-space: nowrap; flex: 0 0 auto;
}
.pxs .pxs-fp-zmeasure svg { flex: 0 0 auto; }
.pxs-fp-zmeasure span { font-family: var(--pxs-sans); font-weight: 600; font-size: 12.5px; }
.pxs-fp-zoomwrap.is-measured .pxs-fp-zmeasure { background: var(--pxs-accent); color: #fff; }

@media (max-width: 640px) {
	.pxs-fp-mark { padding: 5px 8px; border-radius: 8px; }
	.pxs-fp-mark b { font-size: 11.5px; }
	.pxs-fp-mark i { font-size: 10.5px; }
	.pxs-fp-mark em { font-size: 9.5px; }
	.pxs .pxs-fp-zmeasure { height: 38px; padding: 0 11px 0 9px; gap: 5px; }
	.pxs-fp-zmeasure span { font-size: 11.5px; }
	/* The control bar spans the bottom on a phone, so the floor badge cannot stay
	   down there. Top right, opposite the viewer tag. */
	.pxs-fp-totalbadge { left: auto; right: 10px; bottom: auto; top: 10px; padding: 7px 11px; }
}

.pxs-fp-zoomctl { right: 12px; bottom: 12px; padding: 4px; }
	.pxs-fp-zbtn { width: 38px; height: 38px; } /* thumb-sized, not mouse-sized */
	.pxs-fp-zlevel { min-width: 42px; font-size: 11px; }
}

/* Shared section header: title left, mono count right, hairline above. */
.pxs-fp-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
	padding-top: clamp(14px, 1.8vw, 22px);
	margin: 0 0 clamp(20px, 3vw, 34px);
	border-top: 1px solid color-mix(in srgb, var(--pxs-ink) 14%, transparent);
}
.pxs-fp-head h2 {
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(21px, 2.6vw, 34px); line-height: 1.06;
	letter-spacing: -.028em; margin: 0;
}
.pxs-fp-meta,
.pxs-fp-eyebrow,
.pxs-fp-sub {
	font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--pxs-faint);
}
.pxs-fp-meta { flex: 0 0 auto; white-space: nowrap; }

/* Intro */
.pxs-fp-lede { max-width: 720px; }
.pxs-fp-eyebrow { display: block; margin: 0 0 18px; }
.pxs-fp-h1 {
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(34px, 6.4vw, 74px); line-height: .98;
	letter-spacing: -.04em; margin: 0 0 clamp(16px, 2vw, 24px);
	text-wrap: balance;
}
.pxs-fp-lead {
	font-family: var(--pxs-body); font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.62; color: var(--pxs-ink2); margin: 0 0 clamp(22px, 3vw, 32px);
	max-width: 56ch; text-wrap: pretty;
}
/* The price is one of only two places the accent appears on this page. */
.pxs-fp-from { display: flex; align-items: baseline; gap: 9px; margin: 0 0 clamp(22px, 3vw, 30px); }
.pxs-fp-from-l { font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pxs-faint); }
.pxs-fp-from-v { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.03em; color: var(--pxs-accent); }

/* Proof slider. Chips are SOLID ink: a floor plan is near-white, so the
   translucent tag styling used over photographs disappears entirely. */
.pxs-fp-slider { position: relative; width: 100%; border-radius: 0; overflow: hidden; background: var(--pxs-white); }
.pxs-fp-slider img, .pxs-fp-slider .pxs-fp-ph { display: block; width: 100%; height: auto; }
.pxs-fp-chip {
	position: absolute; top: 12px; z-index: 3;
	font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .13em;
	text-transform: uppercase; color: #fff; background: var(--pxs-ink);
	padding: 6px 11px; border-radius: 100px; pointer-events: none; white-space: nowrap;
}
.pxs-fp-chip-l { left: 12px; }
.pxs-fp-chip-r { right: 12px; }
.pxs-fp-cap {
	font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .08em;
	color: var(--pxs-faint); margin: 12px 0 0; text-align: center;
}

/* How it is made */
.pxs-fp-steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 3vw, 34px); grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 760px) { .pxs-fp-steplist { grid-template-columns: repeat(3, 1fr); } }
.pxs-fp-step { margin: 0; }
.pxs-fp-stepfig { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pxs-white); margin: 0 0 14px; }
.pxs-fp-stepfig img, .pxs-fp-stepfig .pxs-fp-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Numbering is honest here: these ARE a sequence, and the order is the point. */
.pxs-fp-stepno { display: block; font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--pxs-accent); margin: 0 0 6px; }
.pxs-fp-step h3 { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(17px, 1.7vw, 20px); letter-spacing: -.02em; margin: 0 0 7px; }
.pxs-fp-step p { font-family: var(--pxs-body); font-size: 15px; line-height: 1.6; color: var(--pxs-ink2); margin: 0; }

/* Included */
.pxs-fp-incl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pxs-fp-incl-list { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 56px); } }
.pxs-fp-incl-list li {
	font-family: var(--pxs-body); font-size: clamp(15px, 1.5vw, 17px); color: var(--pxs-ink2);
	padding: 15px 0 15px 26px; position: relative;
	border-bottom: 1px solid color-mix(in srgb, var(--pxs-ink) 9%, transparent);
}
.pxs-fp-incl-list li::before {
	content: ""; position: absolute; left: 2px; top: 50%; width: 9px; height: 9px;
	margin-top: -4px; background: var(--pxs-ink); border-radius: 50%;
}

/* Picker */
.pxs-fp-picker { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: 1fr; align-items: start; }
.pxs-fp-picker-main { display: grid; gap: clamp(18px, 2.4vw, 26px); min-width: 0; }
@media (min-width: 900px) { .pxs-fp-picker { grid-template-columns: 1.35fr .85fr; } }
.pxs-fp-sizes { display: grid; gap: 10px; grid-template-columns: 1fr; }
.pxs-fp-size {
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px;
	text-align: left; padding: 16px 18px; cursor: pointer;
	background: var(--pxs-white); border: 1px solid color-mix(in srgb, var(--pxs-ink) 12%, transparent);
	border-radius: var(--pxs-r); font-family: var(--pxs-sans);
	transition: border-color .18s, box-shadow .18s;
}
.pxs-fp-size:hover { border-color: color-mix(in srgb, var(--pxs-ink) 34%, transparent); }
.pxs-fp-size.is-on { border-color: var(--pxs-ink); box-shadow: inset 0 0 0 1px var(--pxs-ink); }
.pxs-fp-size-n { font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.pxs-fp-size-d { grid-column: 1; font-family: var(--pxs-body); font-size: 14px; color: var(--pxs-grey); }
.pxs-fp-size-p { grid-column: 2; grid-row: 1 / span 2; font-weight: 600; font-size: 18px; letter-spacing: -.02em; }

.pxs-fp-addons { display: grid; gap: 8px; }
.pxs-fp-sub { display: block; margin: 4px 0 4px; }
.pxs-fp-addon {
	display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px;
	padding: 14px 16px; background: var(--pxs-white);
	border: 1px solid color-mix(in srgb, var(--pxs-ink) 12%, transparent);
	border-radius: var(--pxs-r); cursor: pointer;
}
.pxs-fp-addon input { margin: 3px 0 0; accent-color: var(--pxs-ink); width: 16px; height: 16px; }
.pxs-fp-addon-t { display: block; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.pxs-fp-addon-d { display: block; font-family: var(--pxs-body); font-size: 13.5px; line-height: 1.5; color: var(--pxs-grey); margin-top: 2px; }
.pxs-fp-addon-p { font-family: var(--pxs-mono); font-size: 12px; color: var(--pxs-ink2); white-space: nowrap; }

.pxs-fp-total {
	background: var(--pxs-white); border-radius: var(--pxs-r);
	padding: clamp(20px, 2.6vw, 28px); position: sticky; top: 20px;
	border: 1px solid color-mix(in srgb, var(--pxs-ink) 12%, transparent);
}
.pxs-fp-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--pxs-ink) 12%, transparent); }
.pxs-fp-total-l { font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pxs-faint); }
.pxs-fp-total-v { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -.03em; }
.pxs-fp-total-sum { font-family: var(--pxs-body); font-size: 13.5px; line-height: 1.55; color: var(--pxs-grey); margin: 12px 0 16px; min-height: 1.55em; }
.pxs-fp-add { width: 100%; justify-content: center; }
.pxs-fp-add.is-added { background: var(--pxs-ink); box-shadow: none; }
.pxs-fp-next { margin: 12px 0 0; text-align: center; font-family: var(--pxs-body); font-size: 14px; }
.pxs-fp-next a { color: var(--pxs-ink); text-decoration: underline; text-underline-offset: 3px; }
.pxs-fp-note { font-family: var(--pxs-body); font-size: 12.5px; line-height: 1.5; color: var(--pxs-faint); margin: 14px 0 0; }


/* ---------------------------------------------------------------------------
   Plan catalogue — covers on top, one live viewer per plan underneath.
   Shared by the floor-plans page and the booking read-more, because they are
   showing the same thing. Hidden panes are display:none: the engine re-measures
   on reveal, and anything still in layout adds its full height to the scroll. */
.pxs-fpcat-tabs { display: grid; gap: clamp(10px, 1.4vw, 16px); margin-bottom: clamp(14px, 2vw, 22px); }
.pxs-fpcat-big .pxs-fpcat-tabs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
/* Inside the overlay the covers fill the width they are given rather than
   sitting in a short row with half the dialog empty beside them. Below the
   grid's minimum they become a strip that scrolls sideways instead. */
.pxs-fpcat-wide .pxs-fpcat-tabs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
@media (max-width: 460px) {
	.pxs-fpcat-wide .pxs-fpcat-tabs {
		display: flex; overflow-x: auto; padding-bottom: 4px;
		scrollbar-width: thin; -webkit-overflow-scrolling: touch;
	}
	.pxs-fpcat-wide .pxs-fpcat-tab { flex: 0 0 auto; width: 168px; }
}

.pxs-fpcat-tab {
	position: relative; text-align: left; cursor: pointer; padding: 0; overflow: hidden;
	background: var(--pxs-white); border: 1px solid rgba(13,13,13,.12); border-radius: 16px;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pxs-fpcat-tab:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -22px rgba(13,13,13,.55); }
.pxs-fpcat-tab.is-on { border-color: var(--pxs-accent); box-shadow: 0 0 0 1px var(--pxs-accent) inset; }
.pxs-fpcat-thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: #f4f2ef; }
.pxs-fpcat-big .pxs-fpcat-thumb { aspect-ratio: 16 / 9; }
.pxs-fpcat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs-fpcat-tick {
	position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center; opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s;
	background: var(--pxs-accent); color: #fff;
}
.pxs-fpcat-tick svg { width: 14px; height: 14px; }
.pxs-fpcat-tab.is-on .pxs-fpcat-tick { opacity: 1; transform: none; }
.pxs-fpcat-cap { display: block; padding: 12px 14px 14px; }
.pxs-fpcat-big .pxs-fpcat-cap { padding: 14px 18px 18px; }
.pxs-fpcat-cap b { display: block; font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; letter-spacing: -.015em; color: var(--pxs-ink); }
.pxs-fpcat-big .pxs-fpcat-cap b { font-size: 17px; letter-spacing: -.022em; }
.pxs-fpcat-cap span { display: block; margin-top: 2px; font-family: var(--pxs-body); font-size: 12px; line-height: 1.4; color: var(--pxs-grey); }
.pxs-fpcat-big .pxs-fpcat-cap span { font-size: 13.5px; margin-top: 4px; }
.pxs-fpcat-cap i { display: block; margin-top: 5px; font-style: normal; font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--pxs-accent); }

.pxs-fpcat-pane { display: none; }
.pxs-fpcat-pane.is-on { display: block; }
.pxs-fpcat-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.pxs-fpcat-name { font-family: var(--pxs-sans); font-weight: 600; font-size: 15px; letter-spacing: -.02em; color: var(--pxs-ink); }
.pxs-fpcat-client, .pxs-fpcat-loc { font-family: var(--pxs-body); font-size: 13px; color: var(--pxs-grey); }
.pxs-fpcat-open { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-family: var(--pxs-body); font-size: 13px; color: var(--pxs-accent); }
.pxs-fpcat-open svg { width: 13px; height: 13px; }
@media (max-width: 560px) { .pxs-fpcat-open { margin-left: 0; } }

/* ---------------------------------------------------------------------------
   The m² step.
   One tick, not a yes/no pair: there is no third answer, and a pair makes an
   optional extra look like a question you have to settle before continuing. */
.pxs-bk-sqm-shot { margin: 18px 0 20px; background: #fff; border: 1px solid rgba(13,13,13,.1); border-radius: 16px; overflow: hidden; }
.pxs-bk-sqm-shot img { display: block; width: 100%; height: auto; }
.pxs-bk-sqm-pick { margin-bottom: 14px; }
.pxs-bk-sqm-tick {
	display: flex; align-items: center; gap: 14px; width: 100%; cursor: pointer; text-align: left;
	padding: 16px 18px; border-radius: 16px;
	background: var(--pxs-white); border: 1.5px solid rgba(13,13,13,.14);
	transition: border-color .2s, background .2s, box-shadow .2s;
}
.pxs-bk-sqm-tick:hover { border-color: rgba(13,13,13,.3); }
.pxs-bk-sqm-tick.is-sel { border-color: var(--pxs-accent); background: rgba(255,93,41,.06); box-shadow: 0 14px 34px -24px rgba(255,93,41,.9); }
.pxs-bk-sqm-box {
	flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
	border: 1.5px solid rgba(13,13,13,.28); background: #fff; color: #fff;
	display: grid; place-items: center; transition: background .2s, border-color .2s;
}
.pxs-bk-sqm-box svg { width: 15px; height: 15px; opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s; }
.pxs-bk-sqm-tick.is-sel .pxs-bk-sqm-box { background: var(--pxs-accent); border-color: var(--pxs-accent); }
.pxs-bk-sqm-tick.is-sel .pxs-bk-sqm-box svg { opacity: 1; transform: none; }
.pxs-bk-sqm-lb { flex: 1 1 auto; min-width: 0; }
.pxs-bk-sqm-lb b { display: block; font-family: var(--pxs-sans); font-weight: 600; font-size: 16px; letter-spacing: -.02em; color: var(--pxs-ink); }
.pxs-bk-sqm-lb span { display: block; margin-top: 3px; font-family: var(--pxs-body); font-size: 13.5px; line-height: 1.45; color: var(--pxs-grey); }
.pxs-bk-sqm-price { flex: 0 0 auto; font-family: var(--pxs-sans); font-weight: 600; font-size: 17px; letter-spacing: -.025em; color: var(--pxs-accent); }
.pxs-bk-sqm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pxs-bk-sqm-ex { gap: 8px; }
.pxs-bk-sqm-ex svg { width: 16px; height: 16px; }
.pxs-bk-sqm-quote { margin: 0; font-family: var(--pxs-body); font-size: 14px; color: var(--pxs-ink2); }
.pxs-bk-sqm-quote b { font-weight: 600; color: var(--pxs-ink); }
/* Ticked, the reassurance is answering a question nobody is asking any more. */
.pxs-bk-sqm-pick:has(.is-sel) ~ .pxs-bk-sqm-skip { display: none; }
.pxs-bk-more-pf { margin-top: 26px; }
.pxs-bk-pf-lede { font-family: var(--pxs-body); font-size: 14px; line-height: 1.55; color: var(--pxs-grey); margin: -6px 0 14px; }

/* ---------------------------------------------------------------------------
   Accuracy band.
   The figures carry the answer; the prose only qualifies them. So the numbers
   get their own column and stay legible even if nobody reads a word of it. */
/* Phone: question, then the answer, then the detail — the natural source order.
   Desktop: the figures return to their own column with the heading and the copy
   beside them. */
.pxs-fp-acc-grid { display: grid; gap: clamp(18px, 3.4vw, 52px); grid-template-columns: 1fr; align-items: start; }
.pxs .pxs-fp-acc-h {
	font-family: var(--pxs-sans); font-weight: 600; margin: 0;
	font-size: clamp(1.7rem, 6.6vw, 2.1rem) !important; line-height: 1.08 !important; letter-spacing: -.03em;
}
@media (min-width: 900px) {
	.pxs-fp-acc-grid {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		grid-template-areas: 'figs head' 'figs copy';
		grid-template-rows: auto 1fr;
		gap: clamp(22px, 3.4vw, 52px);
	}
	.pxs-fp-acc-h { grid-area: head; margin-bottom: -8px !important; }
	.pxs-fp-acc-figs { grid-area: figs; }
	.pxs-fp-acc-copy { grid-area: copy; }
	.pxs .pxs-fp-acc-h { font-size: clamp(21px, 2.6vw, 32px) !important; }
}
/* On a phone three full-width slabs were half a screen before the first
   sentence. Same three answers, a third of the height. */
@media (max-width: 899px) {
	.pxs-fp-acc-figs { gap: 8px; }
	.pxs-fp-acc-fig { padding: 12px 14px; border-radius: 12px; }
	.pxs .pxs-fp-acc-fig.is-lead b { font-size: 30px; }
	.pxs .pxs-fp-acc-fig.is-word b { font-size: 16px; }
	.pxs .pxs-fp-acc-fig span { margin-top: 4px; font-size: 12px; line-height: 1.4; }
}
.pxs-fp-acc-figs { display: grid; gap: 10px; }
.pxs-fp-acc-fig {
	background: var(--pxs-white); border: 1px solid color-mix(in srgb, var(--pxs-ink) 10%, transparent);
	padding: 16px 18px;
}
.pxs-fp-acc-fig b {
	display: block; font-family: var(--pxs-sans); font-weight: 600;
	font-size: 30px; line-height: 1; letter-spacing: -.04em; color: var(--pxs-ink);
}
.pxs-fp-acc-fig i { font-style: normal; font-size: .62em; margin-left: 1px; color: var(--pxs-faint); }
.pxs-fp-acc-fig span {
	display: block; margin-top: 7px;
	font-family: var(--pxs-body); font-size: 12.5px; line-height: 1.45; color: var(--pxs-grey);
}
/* Two of the three answers are words, not numbers. At the figure size they
   shouted louder than the one number that matters. */
.pxs-fp-acc-fig.is-word b { font-size: 20px; letter-spacing: -.025em; }
.pxs-fp-acc-fig.is-lead { background: var(--pxs-ink); border-color: var(--pxs-ink); }
.pxs-fp-acc-fig.is-lead b { color: #fff; font-size: 40px; }
.pxs-fp-acc-fig.is-lead i { color: color-mix(in srgb, #fff 55%, transparent); }
.pxs-fp-acc-fig.is-lead span { color: color-mix(in srgb, #fff 72%, transparent); }
/* Kept for any cached markup that still nests the heading inside the copy. */
.pxs-fp-acc-copy h2 {
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(21px, 2.6vw, 32px); line-height: 1.08; letter-spacing: -.028em; margin: 0 0 16px;
}
.pxs-fp-acc-copy p { font-family: var(--pxs-body); font-size: 15px; line-height: 1.62; color: var(--pxs-ink2); margin: 0 0 12px; max-width: 62ch; }
.pxs-fp-acc-copy p:last-child { margin-bottom: 0; }
.pxs-fp-acc-note {
	display: flex; gap: 8px; align-items: flex-start;
	margin-top: 18px !important; padding-top: 14px;
	border-top: 1px solid color-mix(in srgb, var(--pxs-ink) 12%, transparent);
	font-size: 12.5px !important; color: var(--pxs-faint) !important;
}
.pxs-fp-acc-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Viewer / portfolio band.
   It carries the picker as well as the demo now, so it gets a proper headline
   block and more air than a one-line "look closer" section needed. */
.pxs-fp-head-big { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pxs-fp-head-big h2 { font-size: clamp(26px, 3.6vw, 46px); line-height: 1.02; letter-spacing: -.035em; }
.pxs .pxs-fp-headlead { max-width: 62ch; margin: clamp(16px, 1.8vw, 26px) 0 0; font-family: var(--pxs-body); font-size: clamp(14.5px, 1.3vw, 17px); line-height: 1.6; color: var(--pxs-grey); }
.pxs-fp-zoom.has-picker { padding-bottom: clamp(56px, 8vw, 112px); }
.pxs-fp-in-wide { max-width: 1400px; margin: 0 auto; padding: 0 var(--pxs-fp-gut); }
.pxs-fp-zoom.has-picker .pxs-fp-stage { min-height: clamp(320px, 52vh, 640px); }

/* ---------------------------------------------------------------------------
   What you get: the files, and the page we host.
   The list argues; the browser frame proves. Side by side on a wide screen so
   the proof is never a scroll away from the claim. */
.pxs-fp-dl { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .pxs-fp-dl { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); } }
.pxs-fp-dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pxs-fp-dl-list li {
	display: flex; gap: 14px; align-items: flex-start;
	padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--pxs-ink) 10%, transparent);
}
.pxs-fp-dl-list li:last-child { border-bottom: 0; }
.pxs-fp-dl-ic {
	flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
	display: grid; place-items: center; background: var(--pxs-white);
	border: 1px solid color-mix(in srgb, var(--pxs-ink) 10%, transparent); color: var(--pxs-accent);
}
.pxs-fp-dl-ic svg { width: 18px; height: 18px; }
.pxs-fp-dl-tx b { display: block; font-family: var(--pxs-sans); font-weight: 600; font-size: 16px; letter-spacing: -.02em; color: var(--pxs-ink); }
.pxs-fp-dl-tx span { display: block; margin-top: 4px; font-family: var(--pxs-body); font-size: 14.5px; line-height: 1.55; color: var(--pxs-grey); }
.pxs-fp-dl-demo { position: sticky; top: 90px; }
/* On a phone the argument is the picture: this is a real page, here it is, open
   it. The list of file formats is the footnote to that, not the way in — and a
   sticky demo inside a single column just fights the scroll. */
@media (max-width: 899px) {
	.pxs-fp-dl { display: flex; flex-direction: column; }
	.pxs-fp-dl-demo { position: static; top: auto; order: 1; }
	.pxs-fp-dl-list { order: 2; }
	.pxs .pxs-fp-dl-btn { width: 100%; justify-content: center; }
	.pxs .pxs-fp-dl-note { text-align: center; }
}
@media (max-width: 899px) { .pxs-fp-dl-demo { position: static; } }
.pxs-fp-browser {
	margin: 0 0 16px; background: var(--pxs-white); border-radius: 14px; overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--pxs-ink) 12%, transparent);
	box-shadow: 0 30px 60px -40px rgba(13,13,13,.6);
}
.pxs-fp-browser-bar {
	display: flex; align-items: center; gap: 6px; padding: 10px 12px;
	background: #f0eeeb; border-bottom: 1px solid color-mix(in srgb, var(--pxs-ink) 9%, transparent);
}
.pxs-fp-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(13,13,13,.16); }
.pxs-fp-browser-url {
	flex: 1 1 auto; margin-left: 8px; padding: 4px 10px; border-radius: 999px;
	background: #fff; font-family: var(--pxs-mono); font-size: 10.5px; color: var(--pxs-faint);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pxs-fp-browser-shot { display: block; }
.pxs-fp-browser-shot img { display: block; width: 100%; height: auto; }
.pxs-fp-dl-btn { display: inline-flex; align-items: center; gap: 8px; }
.pxs-fp-dl-btn svg { width: 15px; height: 15px; }
.pxs-fp-dl-note { margin-top: 10px !important; }

/* Examples */
.pxs-fp-exgrid { display: grid; gap: clamp(10px, 1.4vw, 16px); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .pxs-fp-exgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .pxs-fp-exgrid { grid-template-columns: repeat(3, 1fr); } }
.pxs-fp-exgrid figure { margin: 0; background: var(--pxs-white); aspect-ratio: 4 / 3; overflow: hidden; }
.pxs-fp-exgrid img, .pxs-fp-exgrid .pxs-fp-ph { width: 100%; height: 100%; object-fit: cover; display: block; }

/* FAQ */
.pxs-fp-q { border-bottom: 1px solid color-mix(in srgb, var(--pxs-ink) 12%, transparent); }
.pxs-fp-q summary {
	cursor: pointer; list-style: none; padding: 18px 32px 18px 0; position: relative;
	font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(16px, 1.7vw, 19px); letter-spacing: -.02em;
}
.pxs-fp-q summary::-webkit-details-marker { display: none; }
.pxs-fp-q summary::after {
	content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	font-family: var(--pxs-mono); font-size: 18px; color: var(--pxs-faint);
}
.pxs-fp-q[open] summary::after { content: "–"; }
.pxs-fp-q p { font-family: var(--pxs-body); font-size: 15.5px; line-height: 1.65; color: var(--pxs-ink2); margin: 0 0 18px; max-width: 62ch; }

/* Close */
.pxs-fp-close .pxs-fp-in { text-align: center; padding-top: clamp(24px, 4vw, 40px); border-top: 1px solid color-mix(in srgb, var(--pxs-ink) 14%, transparent); }
.pxs-fp-close h2 { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(23px, 3.2vw, 40px); letter-spacing: -.03em; line-height: 1.1; margin: 0 auto clamp(20px, 2.6vw, 30px); max-width: 15ch; text-wrap: balance; }

/* Placeholder tile — so the layout reads as designed before real images exist. */
.pxs-fp-ph {
	display: flex; align-items: center; justify-content: center; width: 100%; min-height: 180px;
	aspect-ratio: 3 / 2;
	background: repeating-linear-gradient(45deg, #e7e6e3 0 12px, #efeeec 12px 24px);
	color: var(--pxs-faint); font-family: var(--pxs-mono); font-size: 10.5px;
	letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 10px;
}
.pxs-fp-stepfig .pxs-fp-ph, .pxs-fp-exgrid .pxs-fp-ph { aspect-ratio: auto; height: 100%; min-height: 0; }

/* Scrolling plan.
 * Default (no JS, or reduced motion) is a plain static image — never a tall
 * empty gap. JS adds .is-live to switch on the pinned pan. The pan is
 * horizontal at every width: the plan is ~3.5:1, so there is nothing to
 * reveal vertically. */
.pxs-fp-pan { position: relative; background: var(--pxs-white); }
.pxs-fp-pan-stick { position: relative; overflow: hidden; }
.pxs-fp-pan-track { display: block; }
.pxs-fp-pan-img { display: block; width: 100%; height: auto; }
.pxs-fp-pan-cap { padding: clamp(18px, 3vw, 30px) var(--pxs-fp-gut); }
.pxs-fp-pan-cap h2 {
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(26px, 4.6vw, 52px); line-height: 1.02;
	letter-spacing: -.035em; margin: 10px 0 0; text-wrap: balance;
}
.pxs-fp-pan-hint, .pxs-fp-pan-bar { display: none; }

/* Pinned pan — only once JS confirms it is safe to run. */
.pxs-fp-pan.is-live { height: var(--pxs-pan-h, 220vh); }
.pxs-fp-pan.is-live .pxs-fp-pan-stick {
	position: sticky; top: 0; height: 100vh;
	display: flex; align-items: center;
}
.pxs-fp-pan.is-live .pxs-fp-pan-track {
	will-change: transform;
	transform: translate3d(0, 0, 0);
}
.pxs-fp-pan.is-live .pxs-fp-pan-img {
	height: clamp(320px, 62vh, 760px); width: auto; max-width: none;
}
/* The caption stays put while the plan travels behind it. A scrim keeps it
   readable wherever a dark room happens to slide underneath. */
.pxs-fp-pan.is-live .pxs-fp-pan-cap {
	position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
	display: flex; flex-direction: column; justify-content: center;
	width: min(92%, 460px); padding: 0 clamp(20px, 4vw, 54px); pointer-events: none;
	background: linear-gradient(90deg, var(--pxs-white) 0%, color-mix(in srgb, var(--pxs-white) 86%, transparent) 62%, transparent 100%);
}
.pxs-fp-pan.is-live .pxs-fp-pan-cap h2 { margin-top: 12px; }
.pxs-fp-pan.is-live .pxs-fp-pan-hint {
	display: block; position: absolute; right: clamp(16px, 3vw, 34px); bottom: 22px; z-index: 2;
	font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--pxs-faint); pointer-events: none;
}
/* Progress hairline: a pinned section needs to say how far through it you are. */
.pxs-fp-pan.is-live .pxs-fp-pan-bar {
	display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3;
	background: color-mix(in srgb, var(--pxs-ink) 10%, transparent);
}
.pxs-fp-pan.is-live .pxs-fp-pan-bar span {
	display: block; height: 100%; width: 0; background: var(--pxs-accent);
}
@media (max-width: 700px) {
	/* Phone: caption across the top, plan travelling beneath it. */
	.pxs-fp-pan.is-live .pxs-fp-pan-cap {
		width: 100%; bottom: auto; height: auto; justify-content: flex-start;
		padding: clamp(20px, 6vw, 34px) 16px clamp(26px, 7vw, 40px);
		background: linear-gradient(180deg, var(--pxs-white) 0%, color-mix(in srgb, var(--pxs-white) 88%, transparent) 68%, transparent 100%);
	}
	/* Centre the plan: bottom-aligning it left a dead white band under the
	   heading. Taller too, so it actually fills the pinned screen. */
	.pxs-fp-pan.is-live .pxs-fp-pan-stick { align-items: center; }
	.pxs-fp-pan.is-live .pxs-fp-pan-img { height: clamp(340px, 68vh, 640px); }
	/* The progress hairline already says "keep going"; the words just sat on
	   top of the plan and were unreadable. */
	.pxs-fp-pan.is-live .pxs-fp-pan-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	/* Never pin or translate: fall back to the static plan. */
	.pxs-fp-pan.is-live { height: auto; }
	.pxs-fp-pan.is-live .pxs-fp-pan-stick { position: static; height: auto; display: block; }
	.pxs-fp-pan.is-live .pxs-fp-pan-track { transform: none !important; }
	.pxs-fp-pan.is-live .pxs-fp-pan-img { height: auto; width: 100%; }
	.pxs-fp-pan.is-live .pxs-fp-pan-cap { position: static; width: auto; background: none; }
	.pxs-fp-pan.is-live .pxs-fp-pan-hint, .pxs-fp-pan.is-live .pxs-fp-pan-bar { display: none; }
}

/* Floor plans — phone spacing.
 * First pass packed everything at desktop rhythm, so on a 430px screen the
 * sections ran into each other with nothing telling the eye where to land.
 * More air BETWEEN blocks, tighter WITHIN them, and a clear size jump between
 * a section heading and its body text. */
@media (max-width: 700px) {
	.pxs-fp { --pxs-fp-gut: 20px; }
	/* Every section got its own top padding back: running them together saved
	   scroll and cost the reader any sense of where one thing ended. */
	.pxs-fp-band { padding: 52px 0; }
	.pxs-fp-band + .pxs-fp-band { padding-top: 52px; }
	.pxs-fp .pxs-fp-compare { padding-block: 48px; }
	.pxs-fp .pxs-fp-zoom { padding-block: 46px; }
	.pxs-fp-zoomwrap { border-radius: 14px; }
	.pxs-fp-zoomtag { left: 10px; top: 10px; padding: 6px 11px; font-size: 9.5px; }

	/* Headings carry more weight than the body, so the eye starts there. */
	.pxs-fp-head { padding-top: 20px; margin-bottom: 24px; }
	.pxs-fp-head h2 { font-size: 25px; letter-spacing: -.03em; }
	.pxs-fp-h1 { font-size: 32px !important; line-height: 1.06 !important; letter-spacing: -.04em; }
	.pxs-fp-lead { font-size: 16.5px; line-height: 1.6; margin-bottom: 26px; }
	.pxs-fp-eyebrow { margin-bottom: 14px; }
	.pxs-fp-from { margin-bottom: 26px; }

	/* One clear column, generous rows, so each choice is its own moment. */
	.pxs-fp-picker { gap: 30px; }
	.pxs-fp-picker-main { gap: 26px; }
	.pxs-fp-sizes { gap: 12px; }
	.pxs-fp-size { padding: 18px 20px; }
	.pxs-fp-addons { gap: 12px; }
	.pxs-fp-addon { padding: 16px 18px; }
	.pxs-fp-sub { margin-bottom: 10px; }
	.pxs-fp-total { padding: 24px 20px; position: static; }

	/* The steps are the story — let them breathe instead of stacking tight. */
	.pxs-fp-steplist { gap: 34px; }
	.pxs-fp-stepfig { margin-bottom: 16px; }

	.pxs-fp-incl-list li { padding: 16px 0 16px 26px; font-size: 16px; }
	.pxs-fp-q summary { padding: 20px 32px 20px 0; font-size: 17px; }
	.pxs-fp-cap { margin-top: 14px; }
	.pxs-fp-close h2 { font-size: 28px; }
}

/* A step can be an mp4 instead of a still — it fills the same 4:3 frame. */
.pxs-fp-stepfig video.pxs-fp-vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs-fp-exgrid video.pxs-fp-vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs-fp-slider video.pxs-fp-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


/* =====================================================================
   Service pages (/photography, /virtual-staging).
   Deliberately quieter than the homepage: someone arriving here from a
   search already knows what they want and is reading, not being sold to.
   One column, generous rhythm, prices stated plainly.
   ===================================================================== */
.pxs-sp { background: var(--pxs-bg); color: var(--pxs-ink); }
.pxs-sp-in { max-width: 1060px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.pxs-sp-sec { padding: clamp(44px, 6vw, 82px) 0; }
.pxs-sp-sec + .pxs-sp-sec { padding-top: 0; }

.pxs-sp-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 64px); }
.pxs-sp-hero-in { display: grid; gap: clamp(24px, 4vw, 52px); align-items: center; }
@media (min-width: 880px) { .pxs-sp-hero-in { grid-template-columns: 1.05fr .95fr; } }
/* Avada's responsive typography targets .fusion-responsive-typography-calculated
   with !important and sizes headings from its own viewport curve, which put this
   h1 at 70px on a 390px screen and pushed it straight out of the column. Ours has
   to be !important too, scoped so it can only ever affect these pages.
   The Title Case comes from Avada as well and is left alone: it is how every
   other heading on the site already reads. */
.pxs-sp .pxs-sp-h1 {
	font-family: var(--pxs-sans); font-weight: 700;
	font-size: clamp(2rem, 6.4vw, 3.5rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -.035em; margin: 12px 0 14px;
	text-wrap: balance; overflow-wrap: break-word;
}
.pxs-sp-lead { color: var(--pxs-ink2); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; max-width: 46ch; margin-bottom: 22px; }
.pxs-sp-hero-fig { border-radius: var(--pxs-r); overflow: hidden; aspect-ratio: 4/3; background: #e9e7e4; }
.pxs-sp-hero-fig img, .pxs-sp-hero-fig video { width: 100%; height: 100%; object-fit: cover; display: block; }

.pxs-sp .pxs-sp-h2 {
	font-family: var(--pxs-sans); font-weight: 650;
	font-size: clamp(1.35rem, 4.2vw, 2rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -.028em; margin: 0 0 clamp(18px, 2.4vw, 28px);
	text-wrap: balance; overflow-wrap: break-word;
}

.pxs-sp-inc { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
@media (min-width: 720px) { .pxs-sp-inc { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); } }
.pxs-sp-inc li {
	font-size: 15.5px; color: var(--pxs-ink2);
	padding: 14px 0 14px 26px; position: relative;
	border-bottom: 1px solid color-mix(in srgb, var(--pxs-ink) 10%, transparent);
}
.pxs-sp-inc li::before {
	content: ''; position: absolute; left: 2px; top: 21px;
	width: 7px; height: 7px; border-radius: 50%; background: var(--pxs-accent);
}

.pxs-sp-gal { display: grid; gap: clamp(10px, 1.4vw, 18px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pxs-sp-gal figure { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 3/2; background: #e9e7e4; }
.pxs-sp-gal img, .pxs-sp-gal video { width: 100%; height: 100%; object-fit: cover; display: block; }

.pxs-sp-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(18px, 2.4vw, 30px); }
@media (min-width: 800px) { .pxs-sp-steps { grid-template-columns: repeat(3, 1fr); } }
.pxs-sp-steps li { padding-top: 16px; border-top: 2px solid var(--pxs-ink); }
.pxs-sp-stepno { font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .12em; color: var(--pxs-accent); display: block; margin-bottom: 8px; }
.pxs-sp .pxs-sp-steps h3 { font-family: var(--pxs-sans); font-weight: 620; font-size: 1.05rem !important; line-height: 1.3 !important; letter-spacing: -.015em; margin: 0 0 6px; }
.pxs-sp-steps p { color: var(--pxs-grey); font-size: 14.5px; line-height: 1.55; margin: 0; }

.pxs-sp-pricegrid { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pxs-sp-price {
	background: #fff; border: 1px solid color-mix(in srgb, var(--pxs-ink) 8%, transparent);
	border-radius: 18px; padding: clamp(18px, 2.2vw, 26px);
	display: flex; flex-direction: column; gap: 4px;
}
.pxs-sp-price-amt { font-family: var(--pxs-sans); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.1rem); letter-spacing: -.03em; line-height: 1; }
.pxs-sp-price-lb { font-weight: 600; font-size: 15px; color: var(--pxs-accent); }
.pxs-sp-price-sub { font-size: 13.5px; color: var(--pxs-grey); line-height: 1.45; }
.pxs-sp-note { font-size: 13.5px; color: var(--pxs-grey); margin: 18px 0 22px; }

.pxs-sp-qs { display: grid; gap: 0; }
.pxs-sp-q { border-bottom: 1px solid color-mix(in srgb, var(--pxs-ink) 12%, transparent); }
.pxs-sp-q summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 15.5px; list-style: none; }
.pxs-sp-q summary::-webkit-details-marker { display: none; }
.pxs-sp-q summary::after { content: '+'; float: right; color: var(--pxs-accent); font-weight: 400; font-size: 20px; line-height: 1; }
.pxs-sp-q[open] summary::after { content: '\2212'; }
.pxs-sp-q p { color: var(--pxs-ink2); font-size: 15px; line-height: 1.6; margin: 0 0 18px; max-width: 62ch; }

.pxs-sp-close { text-align: center; padding-bottom: clamp(56px, 8vw, 104px); }
.pxs-sp-close .pxs-sp-in { border-top: 1px solid color-mix(in srgb, var(--pxs-ink) 14%, transparent); padding-top: clamp(28px, 4vw, 48px); }


/* =====================================================================
   Visual upgrades page.

   Read as three numbered steps, not one long scroll. Each part sits on its
   own ground, alternating, with a hard rule and a big numeral at the top, so
   you always know which of the three you are in. Inside a part, every example
   is text first then the pair, and the pairs are the only images on the page,
   which keeps the comparison doing all the work.
   ===================================================================== */
.pxs-vu { background: var(--pxs-bg); color: var(--pxs-ink); }
.pxs-vu-in { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

.pxs-vu-hero { padding: clamp(52px, 7vw, 104px) 0 0; text-align: center; }
.pxs-vu .pxs-vu-h1 {
	font-family: var(--pxs-sans); font-weight: 700;
	font-size: clamp(2rem, 6vw, 3.6rem) !important; line-height: 1.04 !important;
	letter-spacing: -.035em; margin: 12px auto 16px; max-width: 16ch;
	text-wrap: balance; overflow-wrap: break-word;
}
.pxs .pxs-vu-lead {
	color: var(--pxs-ink2); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.65;
	max-width: 58ch; margin: 0 auto 28px; text-wrap: pretty;
}
.pxs-vu-herofig {
	margin-top: clamp(32px, 5vw, 64px); aspect-ratio: 21/9; overflow: hidden; background: #e9e7e4;
}
.pxs-vu-herofig img, .pxs-vu-herofig video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- one part = one step ------------------------------------------------- */
.pxs-vu-part { padding: clamp(52px, 7vw, 104px) 0; }
/* Alternating ground is what separates the three without a heavy divider. */
.pxs-vu-part.is-alt { background: color-mix(in srgb, var(--pxs-ink) 4%, var(--pxs-bg)); }

.pxs-vu-parthead {
	display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 30px);
	align-items: start;
	padding-bottom: clamp(24px, 3vw, 38px);
	margin-bottom: clamp(32px, 4.5vw, 58px);
	border-bottom: 2px solid var(--pxs-ink);
}
.pxs-vu-partno {
	font-family: var(--pxs-mono); font-weight: 500;
	font-size: clamp(2rem, 5vw, 3.4rem); line-height: .9;
	color: var(--pxs-accent); font-variant-numeric: tabular-nums;
}
.pxs-vu-partlabel {
	font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--pxs-grey); display: block; margin-bottom: 10px;
}
.pxs-vu .pxs-vu-parthead h2 {
	font-family: var(--pxs-sans); font-weight: 650;
	font-size: clamp(1.5rem, 3.4vw, 2.3rem) !important; line-height: 1.1 !important;
	letter-spacing: -.03em; margin: 0 0 10px; text-wrap: balance; max-width: 22ch;
}
.pxs-vu-parthead p { color: var(--pxs-grey); font-size: 15.5px; line-height: 1.55; margin: 0; max-width: 52ch; }

/* --- examples inside a part --------------------------------------------- */
.pxs-vu-examples { display: grid; gap: clamp(40px, 6vw, 76px); }
.pxs-vu-ex-tx { margin-bottom: clamp(16px, 2vw, 22px); }
.pxs-vu-exno {
	font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .1em;
	color: var(--pxs-accent); display: block; margin-bottom: 8px;
	font-variant-numeric: tabular-nums;
}
.pxs-vu .pxs-vu-ex h3 {
	font-family: var(--pxs-sans); font-weight: 620;
	font-size: clamp(1.15rem, 2.3vw, 1.6rem) !important; line-height: 1.18 !important;
	letter-spacing: -.02em; margin: 0 0 8px; text-wrap: balance; max-width: 28ch;
}
.pxs-vu-ex-tx p { color: var(--pxs-ink2); font-size: 15.5px; line-height: 1.6; margin: 0; max-width: 58ch; }

.pxs-vu-pair { display: grid; gap: clamp(10px, 1.4vw, 16px); grid-template-columns: 1fr 1fr; }
.pxs-vu-pair.pxs-vu-single { grid-template-columns: 1fr; max-width: 760px; }
.pxs-vu-shot {
	position: relative; margin: 0; border-radius: 14px; overflow: hidden;
	aspect-ratio: 3/2; background: #e9e7e4;
	box-shadow: 0 18px 44px -34px rgba(0,0,0,.5);
}
.pxs-vu-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs-vu-shot figcaption {
	position: absolute; left: 10px; top: 10px;
	font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
	padding: 4px 9px; border-radius: 999px;
	background: rgba(255,255,255,.92); color: var(--pxs-ink);
}
.pxs-vu-after figcaption { background: var(--pxs-accent); color: #fff; }

.pxs-vu-close { padding: clamp(60px, 8vw, 112px) 0; text-align: center; }
.pxs-vu .pxs-vu-close h2 {
	font-family: var(--pxs-sans); font-weight: 650;
	font-size: clamp(1.4rem, 3vw, 2rem) !important; line-height: 1.12 !important;
	letter-spacing: -.03em; margin: 0 0 10px; text-wrap: balance;
}
.pxs-vu-close p { color: var(--pxs-grey); font-size: 15.5px; max-width: 52ch; margin: 0 auto 24px; }

@media (max-width: 700px) {
	.pxs-vu-herofig { aspect-ratio: 4/3; margin-top: 28px; }
	.pxs-vu-part { padding: 44px 0; }
	/* The numeral moves above the heading so the title keeps full width. */
	.pxs-vu-parthead { grid-template-columns: 1fr; gap: 10px; padding-bottom: 18px; margin-bottom: 30px; }
	.pxs-vu-partno { font-size: 1.9rem; }
	.pxs-vu-examples { gap: 38px; }
	/* Before and after stay side by side: stacked, they stop being a comparison. */
	.pxs-vu-pair { gap: 7px; }
	.pxs-vu-shot { aspect-ratio: 1/1; border-radius: 10px; }
	.pxs-vu-shot figcaption { left: 7px; top: 7px; font-size: 9px; padding: 3px 7px; }
	.pxs-vu-ex-tx p { font-size: 14.5px; }
}

/* =====================================================================
   Floor-plan delivery page (.pxs-planproj)

   A portfolio project whose whole content is one explorable plan. It is
   sent to a client and passed on by them, so it reads as a document about
   the property first and a portfolio second: plan, measurements, then a
   short note on the work and the rest of the portfolio.
   ===================================================================== */

/* .pxs and .pxs-planproj land on the SAME element, so these must be compound. */
.pxs.pxs-planproj {
	--pxs-tx: 18px;
	width: 100%; max-width: none; margin: 0; box-sizing: border-box;
	padding: clamp(18px, 3vw, 34px) 0 clamp(56px, 9vw, 120px);
	color: var(--pxs-ink); font-family: var(--pxs-sans);
}
@media (max-width: 1000px) {
	.pxs.pxs-planproj { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}

/* ---- header ---------------------------------------------------------- */

.pxs-plan-head {
	max-width: 1080px; margin: 0 auto clamp(24px, 3.5vw, 40px);
	padding-inline: clamp(18px, 4vw, 40px);
	text-align: center;
}
.pxs-plan-eyebrow {
	display: block; margin: 0 0 14px;
	font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--pxs-faint);
}
/* Avada sizes headings from .fusion-responsive-typography-calculated with
   !important, which put a 70px h1 on a 390px screen once already. Scoped
   !important is the only thing that outranks it. */
.pxs .pxs-plan-title {
	margin: 0; font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(30px, 4.6vw, 54px) !important;
	line-height: 1.05 !important; letter-spacing: -.03em;
	color: var(--pxs-ink); text-wrap: balance;
}
/* Avada capitalises every h1 and h2, which turned "Loft in Mitte" into
   "Loft In Mitte" and "Rooms and measurements" into "Rooms And Measurements".
   Sentence case is the house style; these are titles, not headlines. */
.pxs .pxs-plan-title,
.pxs .pxs-plan-rooms h2,
.pxs .pxs-plan-recap-head h2,
.pxs .pxs-plan-recap-list h3 { text-transform: none !important; }
.pxs-plan-meta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 10px clamp(14px, 2vw, 24px);
	margin: clamp(14px, 2vw, 20px) 0 0;
}
.pxs-plan-client,
.pxs-plan-loc {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--pxs-body); font-size: 14.5px; color: var(--pxs-grey);
}
.pxs-plan-loc svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--pxs-faint); }
.pxs-plan-for { color: var(--pxs-faint); }
.pxs-plan-client a,
.pxs-plan-client b {
	display: inline-flex; align-items: center; gap: 4px;
	font-family: var(--pxs-sans); font-weight: 600; color: var(--pxs-ink);
	text-decoration: none; border-bottom: 1px solid transparent;
	transition: color .2s var(--pxs-ease), border-color .2s var(--pxs-ease);
}
.pxs-plan-client a svg { width: 12px; height: 12px; }
.pxs-plan-client a:hover { color: var(--pxs-accent); border-bottom-color: currentColor; }
.pxs-plan-area {
	display: inline-flex; align-items: center;
	padding: 5px 12px; border-radius: 999px;
	background: color-mix(in srgb, var(--pxs-accent) 12%, transparent);
	font-family: var(--pxs-mono); font-size: 12.5px; letter-spacing: .02em;
	color: color-mix(in srgb, var(--pxs-accent) 82%, var(--pxs-ink));
}

/* ---- viewer ---------------------------------------------------------- */

.pxs-plan-viewer { max-width: 1560px; margin: 0 auto; padding-inline: clamp(0px, 2vw, 34px); }
@media (max-width: 700px) { .pxs-plan-viewer { padding-inline: 0; } }
.pxs-plan-wrap { position: relative; border-radius: var(--pxs-r); overflow: hidden; background: var(--pxs-bg2); }
@media (max-width: 700px) { .pxs-plan-wrap { border-radius: 0; } }

/* The plan is 1.6:1, so the frame is close to it: at "fit" the drawing then
   fills the frame instead of floating in a letterbox with the detail too small
   to read. The phone frame is square for the same reason — a 3:4 frame would
   waste half its height on empty space above and below a wide plan. */
/* `width: 100%` is load-bearing. With only `aspect-ratio` + `max-height`, once the
   height clamp bites the browser transfers it BACK through the ratio and shrinks
   the width too: the frame came out 1155px wide inside a 1444px card, with the
   plan parked against its left edge and dead grey down the right. A definite
   width makes the ratio compute the height and the clamp cap it, nothing more. */
.pxs-fp-stage.pxs-plan-stage { width: 100%; aspect-ratio: 16 / 10; max-height: 80vh; background: var(--pxs-bg2); }
@media (max-width: 700px) {
	/* Slightly wider than square: the plan is 1.6:1, so a square frame left a
	   band of empty grey above and below it at rest. 5:4 keeps enough height to
	   explore in after zooming without the drawing floating in space. */
	.pxs-fp-stage.pxs-plan-stage { aspect-ratio: 5 / 4; max-height: 64vh; }
}

/* The rotor spins inside the panned layer. The layer is resized to the rotated
   bounding box by the script, and the rotor is re-centred in it, so panning and
   clamping keep working on a plain rectangle at every angle. */
.pxs-fp-zoomrot { position: absolute; top: 0; left: 0; transform-origin: 50% 50%; will-change: transform; }
.pxs .pxs-fp-zoomrot .pxs-fp-zoomimg { position: absolute; top: 0; left: 0; transform: none; }

/* Labels ride inside the rotor, so they inherit the spin. --pxs-mark-rot is the
   inverse angle, which keeps the words upright however far the plan is turned. */
.pxs-planproj .pxs-fp-mark,
.pxs-plan-wrap .pxs-fp-mark {
	transform: translate(-50%, -50%) rotate(var(--pxs-mark-rot, 0deg)) scale(var(--pxs-mark-inv, 1));
}

/* Turn controls. Desktop: pinned opposite the zoom bar. Phone: their own row
   under the plan, where they cannot collide with the floor badge or the bar. */
/* Smaller than the zoom bar, not larger. Turning is the rarer adjustment of the
   two and it was reading as the primary control simply by being the widest
   thing on the plan: a 132px dial, a 40px readout and two full-size buttons. */
.pxs-plan-rot {
	position: absolute; top: clamp(12px, 2vw, 22px); right: clamp(12px, 2vw, 22px); z-index: 4;
	display: flex; align-items: center; gap: 1px;
	padding: 3px 7px; border-radius: 999px;
	background: color-mix(in srgb, var(--pxs-bg) 88%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border: 1px solid color-mix(in srgb, var(--pxs-ink) 12%, transparent);
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
}
.pxs-plan-rotlevel {
	min-width: 30px; text-align: center;
	font-family: var(--pxs-mono); font-size: 10px; letter-spacing: .02em;
	color: var(--pxs-grey); font-variant-numeric: tabular-nums;
}
.pxs-plan-rot .pxs-fp-zbtn { width: 26px; height: 26px; }
.pxs-plan-rot .pxs-fp-zbtn svg { width: 14px; height: 14px; }
.pxs-plan-wrap.is-turned .pxs-plan-rotlevel { color: var(--pxs-accent); }

/* `.pxs input { font-size: 100% }` is (0,1,1) and outranks a lone class, so the
   dial needs the element in the selector too. */
.pxs input[type="range"].pxs-plan-dial {
	-webkit-appearance: none; appearance: none;
	width: clamp(60px, 7vw, 84px); height: 16px;
	margin: 0; padding: 0; background: transparent; border: 0;
	cursor: ew-resize; touch-action: none;
}
.pxs input[type="range"].pxs-plan-dial::-webkit-slider-runnable-track {
	height: 3px; border-radius: 999px;
	background: color-mix(in srgb, var(--pxs-ink) 16%, transparent);
}
.pxs input[type="range"].pxs-plan-dial::-moz-range-track {
	height: 3px; border-radius: 999px;
	background: color-mix(in srgb, var(--pxs-ink) 16%, transparent);
}
.pxs input[type="range"].pxs-plan-dial::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 12px; height: 12px; margin-top: -4.5px;
	border: 0; border-radius: 999px; background: var(--pxs-accent);
	box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .35);
}
.pxs input[type="range"].pxs-plan-dial::-moz-range-thumb {
	width: 12px; height: 12px;
	border: 0; border-radius: 999px; background: var(--pxs-accent);
	box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .35);
}
.pxs input[type="range"].pxs-plan-dial:focus-visible { outline: 2px solid var(--pxs-accent); outline-offset: 3px; }

/* On a phone there is no room to float two control bars over a 390px-wide plan:
   the turn row landed straight under the zoom pill and disappeared behind it. Both
   drop out of the overlay and sit under the plan instead, which also gives the
   drawing itself back the full frame. Full screen keeps them floating, because
   there the frame IS the screen and flow space would eat into it. */
@media (max-width: 700px) {
	.pxs-plan-wrap:not(.is-full) { display: flex; flex-direction: column; }
	.pxs-plan-wrap:not(.is-full) .pxs-fp-zoomctl {
		position: static; order: 1;
		margin: 10px auto 0; width: max-content; max-width: calc(100% - 20px);
	}
	.pxs-plan-wrap:not(.is-full) .pxs-plan-rot {
		position: static; order: 2; justify-content: center;
		margin: 8px auto 12px; width: max-content; max-width: calc(100% - 20px);
	}
	.pxs-plan-wrap.is-full .pxs-plan-rot {
		top: auto; bottom: 66px; left: 50%; right: auto; transform: translateX(-50%);
	}
	/* Narrower, but the touch target keeps its height — a 16px-tall slider is
	   not something a thumb can find. */
	.pxs input[type="range"].pxs-plan-dial { width: min(30vw, 120px); height: 28px; }
	.pxs-plan-rot .pxs-fp-zbtn { width: 32px; height: 32px; }
	/* The badge is positioned against the WRAP, which is now taller than the plan,
	   so bottom-left would put it under the bars. Top right, inside the frame. */
	.pxs-plan-wrap .pxs-fp-totalbadge { left: auto; right: 10px; top: 10px; bottom: auto; }
}

/* Every catalogue viewer is the same engine in a narrower frame, so they all hit
   the collision the project page hit: the turn row lands on the corner tag and
   the zoom pill sits on the plan. Same answer everywhere — both bars drop under
   the drawing, which also gives the drawing back the full frame. */
@media (max-width: 700px) {
	.pxs-fp-zoomwrap.has-rot:not(.is-full),
	.pxs-bk-more-viewer:not(.is-full) { display: flex; flex-direction: column; }
	.pxs-fp-zoomwrap.has-rot:not(.is-full) .pxs-fp-zoomctl,
	.pxs-bk-more-viewer:not(.is-full) .pxs-fp-zoomctl {
		position: static; order: 1;
		margin: 10px auto 0; width: max-content; max-width: calc(100% - 20px);
	}
	.pxs-fp-zoomwrap.has-rot:not(.is-full) .pxs-plan-rot,
	.pxs-bk-more-viewer:not(.is-full) .pxs-plan-rot {
		position: static; order: 2; justify-content: center;
		margin: 8px auto 10px; width: max-content; max-width: calc(100% - 20px);
	}
	.pxs-fp-zoomwrap.has-rot .pxs-fp-totalbadge,
	.pxs-bk-more-viewer .pxs-fp-totalbadge { left: auto; right: 10px; top: 10px; bottom: auto; }
	.pxs-fp-zoomwrap.has-rot .pxs-fp-mark,
	.pxs-bk-more-viewer .pxs-fp-mark { padding: 4px 7px; gap: 0; }
}

/* Too small to label: see initFpZoom(). The measurements are still one tap away
   on the toggle, and the full room list is directly under the viewer. */
.pxs-fp-stage.is-tiny .pxs-fp-marks { opacity: 0; }

/* On a phone the plan is ~390px across and the dimension line is the widest
   thing in the pill. Dropping it here takes about a third off every label and
   loses nothing: the same figures are in the room list a scroll below. */
@media (max-width: 640px) {
	.pxs-plan-wrap .pxs-fp-mark { padding: 4px 7px; gap: 0; }
	.pxs-plan-wrap .pxs-fp-mark em { display: none; }
}

.pxs .pxs-plan-hint {
	max-width: 720px; margin: clamp(14px, 2vw, 20px) auto 0;
	padding-inline: clamp(18px, 4vw, 40px);
	font-family: var(--pxs-body); font-size: 13.5px; line-height: 1.6;
	color: var(--pxs-faint); text-align: center;
}

/* ---- room list ------------------------------------------------------- */

/* Everything below the viewer shares one column, so the page has a single left
   edge instead of four competing ones. */
.pxs-plan-rooms {
	max-width: 1180px; margin: clamp(52px, 8vw, 100px) auto 0;
	padding-inline: clamp(18px, 4vw, 40px);
}
.pxs .pxs-plan-rooms h2 {
	margin: 0 0 clamp(18px, 2.4vw, 26px);
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(21px, 2.2vw, 27px) !important; line-height: 1.15 !important;
	letter-spacing: -.02em; color: var(--pxs-ink);
}
/* Two columns once there is room: four rooms in one 1180px-wide list would be
   three short words adrift in a very long line. The rule lives on the list, not
   on the first row, so it still spans both columns whatever the room count. */
.pxs-plan-roomlist {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: 1fr;
	border-top: 1px solid color-mix(in srgb, var(--pxs-ink) 10%, transparent);
}
@media (min-width: 820px) {
	.pxs-plan-roomlist { grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 4vw, 64px); }
}
/* Fixed tracks, not `auto`: every row is its own grid, so `auto` sized each
   row's columns independently and a room with no dimensions pushed its area out
   to the edge while the row under it sat in the middle. Numbers in a column
   have to line up to be read as a column. */
.pxs-plan-roomlist li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 78px 128px;
	align-items: baseline; gap: 6px clamp(10px, 1.4vw, 18px);
	padding: 14px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--pxs-ink) 10%, transparent);
}
.pxs-plan-rarea, .pxs-plan-rdims { text-align: right; }
.pxs-plan-rname { font-family: var(--pxs-sans); font-weight: 600; font-size: 15.5px; color: var(--pxs-ink); }
.pxs-plan-rarea { font-family: var(--pxs-mono); font-size: 13.5px; color: var(--pxs-accent); font-variant-numeric: tabular-nums; }
.pxs-plan-rdims { font-family: var(--pxs-mono); font-size: 12.5px; color: var(--pxs-faint); font-variant-numeric: tabular-nums; }
.pxs-plan-total {
	display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
	margin: 18px 0 0; max-width: 520px;
}
.pxs-plan-total span { font-family: var(--pxs-sans); font-weight: 600; font-size: 15.5px; color: var(--pxs-ink); }
.pxs-plan-total b { font-family: var(--pxs-mono); font-weight: 500; font-size: 16px; color: var(--pxs-ink); font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
	/* Three columns will not fit; the dimensions drop under the name and the
	   area stays on the right where it can be scanned down the column. All three
	   are placed explicitly: giving only two of them a row swapped the name and
	   the area, because auto-placement then filled around them. */
	.pxs-plan-roomlist li { grid-template-columns: minmax(0, 1fr) auto; }
	.pxs-plan-rdims { text-align: left; }
	.pxs-plan-rname { grid-column: 1; grid-row: 1; }
	.pxs-plan-rarea { grid-column: 2; grid-row: 1; }
	.pxs-plan-rdims { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- measurements as an upgrade ------------------------------------- */

/* Takes the room list's place when a plan's measurements are sold separately:
   the offer, the accuracy explanation from the floor-plans page, and at the
   bottom a way to ask for them. Same column and gutter as the room list. */
.pxs-plan-up {
	max-width: 1180px; margin: clamp(52px, 8vw, 100px) auto 0;
	padding-inline: clamp(18px, 4vw, 40px);
	scroll-margin-top: 96px;
}
.pxs .pxs-plan-up h2,
.pxs .pxs-plan-up h3 { text-transform: none !important; }
.pxs-plan-up-offer {
	display: grid; grid-template-columns: 1fr; align-items: center;
	gap: clamp(22px, 3.4vw, 48px);
	padding: clamp(22px, 3.2vw, 40px);
	border-radius: 22px;
	background: var(--pxs-white);
	border: 1px solid color-mix(in srgb, var(--pxs-ink) 8%, transparent);
}
@media (min-width: 900px) {
	.pxs-plan-up-offer.has-ex { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}
.pxs-plan-up-eyebrow {
	display: block; margin: 0 0 12px;
	font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--pxs-accent);
}
.pxs .pxs-plan-up-copy h2 {
	margin: 0 0 12px;
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(24px, 2.8vw, 34px) !important; line-height: 1.12 !important;
	letter-spacing: -.025em; color: var(--pxs-ink);
}
.pxs-plan-up-copy p {
	margin: 0; max-width: 52ch; font-family: var(--pxs-body);
	font-size: clamp(15px, 1.3vw, 16.5px); line-height: 1.66; color: var(--pxs-ink2);
	text-wrap: pretty;
}
.pxs .pxs-plan-up-price {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
	margin: clamp(20px, 2.6vw, 28px) 0 0;
}
.pxs-plan-up-price b {
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(34px, 4vw, 44px); line-height: 1; letter-spacing: -.04em; color: var(--pxs-ink);
}
.pxs-plan-up-price s {
	font-family: var(--pxs-mono); font-size: 16px; color: var(--pxs-faint);
	text-decoration-thickness: 1.5px;
}
.pxs-plan-up-price > span {
	flex: 0 0 100%;
	font-family: var(--pxs-body); font-size: 13px; color: var(--pxs-grey);
}
.pxs-plan-up-ex { margin: 0; }
.pxs-plan-up-ex img {
	display: block; width: 100%; height: auto;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--pxs-ink) 8%, transparent);
}
.pxs-plan-up-ex figcaption {
	margin: 8px 0 0;
	font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--pxs-faint);
}
.pxs-plan-up-acc { margin-top: clamp(44px, 6.5vw, 80px); }

/* The ask, at the bottom: dark so it reads as the end of the offer. */
.pxs-plan-up-cta {
	display: grid; grid-template-columns: 1fr; gap: 18px 32px; align-items: center;
	margin-top: clamp(44px, 6.5vw, 80px);
	padding: clamp(24px, 3.4vw, 42px);
	border-radius: 22px;
	background: var(--pxs-ink); color: #fff;
}
@media (min-width: 900px) {
	.pxs-plan-up-cta { grid-template-columns: minmax(0, 1fr) auto; }
}
.pxs .pxs-plan-up-cta h3 {
	margin: 0 0 8px;
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(22px, 2.4vw, 28px) !important; line-height: 1.15 !important;
	letter-spacing: -.02em; color: #fff;
}
.pxs-plan-up-cta-copy p {
	margin: 0; max-width: 52ch; font-family: var(--pxs-body);
	font-size: 15px; line-height: 1.6; color: color-mix(in srgb, #fff 72%, transparent);
}
.pxs-plan-up-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pxs .pxs-plan-up-btns .pxs-btn { text-decoration: none; }
.pxs .pxs-plan-up-btns .pxs-btn-line { border-color: color-mix(in srgb, #fff 32%, transparent); color: #fff; }
.pxs .pxs-plan-up-btns .pxs-btn-line:hover { border-color: #fff; color: #fff; }
.pxs .pxs-plan-up-reach {
	grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px;
	margin: 0; padding-top: 16px;
	border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
	font-family: var(--pxs-mono); font-size: 12.5px;
}
.pxs .pxs-plan-up-reach a { color: color-mix(in srgb, #fff 70%, transparent); text-decoration: none; }
.pxs .pxs-plan-up-reach a:hover { color: #fff; }
@media (max-width: 520px) {
	.pxs-plan-up-btns .pxs-btn { flex: 1 1 100%; justify-content: center; }
}

/* The viewer's measurements control, when there are none to show: a link down
   to the offer, with a lock instead of the ruler. */
.pxs a.pxs-plan-zlock,
.pxs a.pxs-plan-zlock:hover { color: var(--pxs-ink); text-decoration: none; }

/* ---- what we do ------------------------------------------------------ */

.pxs-plan-recap {
	max-width: 1180px; margin: clamp(56px, 9vw, 112px) auto 0;
	padding-inline: clamp(18px, 4vw, 40px);
}
.pxs-plan-recap-head { max-width: 640px; margin: 0 0 clamp(26px, 3.5vw, 40px); }
.pxs .pxs-plan-recap-head h2 {
	margin: 0 0 12px;
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(24px, 2.8vw, 34px) !important; line-height: 1.12 !important;
	letter-spacing: -.025em; color: var(--pxs-ink);
}
.pxs-plan-recap-head p {
	margin: 0; font-family: var(--pxs-body);
	font-size: clamp(15px, 1.3vw, 16.5px); line-height: 1.68; color: var(--pxs-ink2);
	text-wrap: pretty;
}
.pxs-plan-recap-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: clamp(14px, 1.6vw, 20px);
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
/* Tablet widths fit three, which leaves the fourth card stranded on its own row.
   Two by two reads as a set. */
@media (min-width: 641px) and (max-width: 1023px) {
	.pxs-plan-recap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pxs-plan-recap-list li {
	padding: clamp(20px, 2.2vw, 26px);
	border-radius: 18px;
	background: color-mix(in srgb, var(--pxs-white) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--pxs-ink) 7%, transparent);
}
.pxs-plan-recap-ico {
	display: grid; place-items: center;
	width: 36px; height: 36px; margin: 0 0 14px;
	border-radius: 11px;
	background: color-mix(in srgb, var(--pxs-accent) 13%, transparent);
	color: var(--pxs-accent);
}
.pxs-plan-recap-ico svg { width: 19px; height: 19px; }
.pxs .pxs-plan-recap-list h3 {
	margin: 0 0 7px;
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: 16.5px !important; line-height: 1.25 !important;
	letter-spacing: -.015em; color: var(--pxs-ink);
}
.pxs-plan-recap-list p {
	margin: 0; font-family: var(--pxs-body);
	font-size: 14px; line-height: 1.62; color: var(--pxs-grey); text-wrap: pretty;
}

/* The related strip is shared with the photo projects but this page has no
   edge-to-edge gallery above it to line up with, so it gets the same gutter. */
.pxs-planproj .pxs-related { max-width: 1180px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }

/* =====================================================================
   Booking: the plan viewer inside the read-more, the full-page link,
   the slow zoom-out on the floor-plans card, and the split date/time
   steps.
   ===================================================================== */

/* The viewer sits at the top of the overlay, above the argument for it: the
   fastest way to believe a plan is explorable is to drag it. */
.pxs-bk-more-viewer { margin: 22px 0 10px; }
.pxs-fp-stage.pxs-bk-more-stage {
	width: 100%; aspect-ratio: 16 / 10; max-height: 52vh;
	background: color-mix(in srgb, var(--pxs-ink) 5%, #fff);
}
@media (max-width: 700px) {
	/* Nearly square on a phone for the same reason the delivery page is: a wide
	   plan in a letterbox is a hairline nobody can read. */
	.pxs-fp-stage.pxs-bk-more-stage { aspect-ratio: 5 / 4; max-height: 44vh; }
}
.pxs-bk-more-viewhint {
	margin: 9px 0 0; color: var(--pxs-faint);
	font-family: var(--pxs-body); font-size: 12.5px; line-height: 1.5;
}

/* The link out. Secondary to "Add to quote" on purpose: adding it is the thing
   we want, reading everything is the thing some people need first. */
.pxs .pxs-bk-more-page {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
	background: #fff; color: var(--pxs-ink); text-decoration: none;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pxs-ink) 18%, transparent);
	transition: box-shadow .2s var(--pxs-ease), color .2s var(--pxs-ease);
}
.pxs .pxs-bk-more-page:hover { color: var(--pxs-accent); box-shadow: inset 0 0 0 1px var(--pxs-accent); }
.pxs .pxs-bk-more-page svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* Push "Back to the questions" to the far end so the two actions read as a pair. */
.pxs-bk-more-foot .pxs-bk-more-back { margin-left: auto; }
@media (max-width: 640px) {
	.pxs .pxs-bk-more-page span { display: none; }
	.pxs .pxs-bk-more-page { padding-inline: 14px; }
}

/* The floor-plans card: opens close in on the drawing, pulls back to the whole
   plan over 5s, holds, repeats. A plan shrunk to a card is unreadable, so the
   detail says "this is measured" and the full shape says what you get. */
.pxs-bk-card-zoomout { overflow: hidden; }
.pxs-bk-card-zoomout img {
	transform-origin: 38% 42%;
	animation: pxs-bk-planout 9s var(--pxs-ease) infinite both;
}
@keyframes pxs-bk-planout {
	0%   { transform: scale(2.15); }
	55%  { transform: scale(1); }
	100% { transform: scale(1); }
}
/* Motion for its own sake is the first thing to drop when it is unwelcome. */
@media (prefers-reduced-motion: reduce) {
	.pxs-bk-card-zoomout img { animation: none; transform: none; }
}

/* A date step with one panel should not look like panel 1 of 2. */
.pxs-bk-zone-solo { border: 0; padding: 0; background: none; }
.pxs-bk-zone-solo > .pxs-bk-zone-head { padding-left: 0; }

/* The nudge confirming itself when the card it ticked is on another step. */
.pxs-bk-nudge-done {
	margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
	background: color-mix(in srgb, var(--pxs-accent) 12%, transparent);
	color: color-mix(in srgb, var(--pxs-accent) 82%, var(--pxs-ink));
	font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px;
}

/* =====================================================================
   Listing page: address autocomplete, a compass laid over the map, the
   photo drop, and the seasonal sun note.
   ===================================================================== */

.pxs .pxs-lp-known {
	margin-top: 10px; font-size: 13.5px; color: var(--pxs-grey);
	background: color-mix(in srgb, var(--pxs-accent) 9%, transparent);
	border-radius: 10px; padding: 8px 14px; display: inline-block;
}
.pxs .pxs-lp-req {
	font-style: normal; font-family: var(--pxs-mono); font-size: 10px;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--pxs-accent); margin-left: 6px;
}

/* A placeholder at full contrast reads as a filled-in field, and people skip
   past a field they think they have already answered. Every input on this page
   is one someone has to actually type into, so the hint stays a hint. */
.pxs .pxs-lp-form ::placeholder { color: #a9a49d; opacity: 1; }
.pxs .pxs-lp-form ::-webkit-input-placeholder { color: #a9a49d; }
.pxs .pxs-lp-form :-ms-input-placeholder { color: #a9a49d; }
.pxs .pxs-lp-searchin::placeholder { color: #a9a49d; opacity: 1; }

/* The promise, stated once at the top where the commitment worry lives. */
.pxs .pxs-lp-promise {
	display: inline-flex; align-items: flex-start; gap: 9px; text-align: left;
	margin: 12px auto 0; padding: 10px 15px; max-width: 480px;
	background: rgba(63,107,69,.08); border: 1px solid rgba(63,107,69,.22);
	border-radius: 12px; color: #3f6b45; font-size: 13.5px; line-height: 1.55;
}
.pxs .pxs-lp-promise svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }

/* Floor plans: an answer, not a field. */

/* ---- address autocomplete ---- */
.pxs .pxs-lp-ac { position: relative; flex: 1 1 auto; min-width: 0; }
.pxs .pxs-lp-ac .pxs-lp-searchin { width: 100%; }
.pxs .pxs-lp-aclist {
	position: absolute; z-index: 20; top: calc(100% + 5px); left: 0; right: 0;
	margin: 0; padding: 5px; list-style: none;
	background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 13px;
	box-shadow: 0 22px 50px -24px rgba(0,0,0,.45);
	max-height: 264px; overflow-y: auto;
}
.pxs .pxs-lp-aclist[hidden] { display: none; }
.pxs .pxs-lp-acitem {
	padding: 9px 11px; border-radius: 9px; cursor: pointer;
	font-size: 13.5px; line-height: 1.4; color: var(--pxs-ink2);
}
.pxs .pxs-lp-acitem:hover, .pxs .pxs-lp-acitem.is-on { background: color-mix(in srgb, var(--pxs-accent) 12%, transparent); color: var(--pxs-ink); }

/* ---- the compass, sitting on the map's own imagery ---- */
.pxs .pxs-lp-compass-h {
	font-size: 12.5px; line-height: 1.5; color: var(--pxs-faint);
	text-align: center; max-width: 330px;
}
/* North-up, exactly like the Leaflet map above, so the ring and the map
   agree and the visitor only has to recognise their own roof. */
.pxs .pxs-lp-compass-mini {
	position: absolute; top: 50%; left: 50%; width: 104px; height: 104px;
	transform: translate(-50%, -50%); z-index: 0;
	border-radius: 50%; overflow: hidden; background: rgba(0,0,0,.05);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
	pointer-events: none;
}
/* The frozen Leaflet view inside it must not fight the ring for clicks or z-order. */
.pxs .pxs-lp-compass-mini .leaflet-container { width: 100%; height: 100%; background: transparent; }
.pxs .pxs-lp-compass-mini .leaflet-control-container { display: none; }
.pxs .pxs-lp-compass .pxs-lp-dir { z-index: 2; }
.pxs .pxs-lp-compass-c { z-index: 1; }
.pxs .pxs-lp-compass-mini.has-map { box-shadow: inset 0 0 0 2px #fff, 0 4px 14px -6px rgba(0,0,0,.5); }
/* Once the map is in the middle, the word "windows" is both redundant and
   sitting on top of the streets it is meant to help read. */
.pxs .pxs-lp-compass:has(.pxs-lp-compass-mini.has-map) .pxs-lp-compass-c { display: none; }
.pxs .pxs-lp-mapblock.has-dir .pxs-lp-compass-c { color: var(--pxs-accent); }

/* ---- photo upload ---- */
.pxs .pxs-lp-up { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.pxs .pxs-lp-up-t { font-family: var(--pxs-sans); font-weight: 600; font-size: 14.5px; color: var(--pxs-ink); }
.pxs .pxs-lp-up-t em { font-style: normal; color: var(--pxs-faint); font-weight: 400; }
.pxs .pxs-lp-up-s { font-size: 12.5px; line-height: 1.5; color: var(--pxs-grey); margin-bottom: 8px; }
.pxs .pxs-lp-drop {
	display: flex; flex-direction: column; align-items: center; gap: 5px;
	padding: 22px 18px; cursor: pointer; text-align: center;
	border: 1.5px dashed rgba(0,0,0,.18); border-radius: 16px;
	background: rgba(0,0,0,.015);
	transition: border-color .2s var(--pxs-ease), background .2s var(--pxs-ease);
}
.pxs .pxs-lp-drop:hover, .pxs .pxs-lp-drop:focus-visible, .pxs .pxs-lp-drop.is-over {
	border-color: var(--pxs-accent); background: color-mix(in srgb, var(--pxs-accent) 7%, transparent);
}
.pxs .pxs-lp-drop svg { width: 22px; height: 22px; color: var(--pxs-accent); }
.pxs .pxs-lp-drop b { font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; }
.pxs .pxs-lp-drop span { font-size: 12px; color: var(--pxs-faint); }
/* The address the invitation went to, shown back so it can be checked. */
.pxs .pxs-lp-synced {
	display: flex; align-items: flex-start; gap: 7px; margin-top: 7px;
	font-family: var(--pxs-body); font-size: 12.5px; line-height: 1.45; color: var(--pxs-accent);
}
.pxs .pxs-lp-synced svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 2px; }

/* The page after it has been sent. */
.pxs .pxs-lp-done { text-align: center; padding: clamp(30px, 6vw, 64px) 0; animation: pxs-pop .45s var(--pxs-ease) both; }
.pxs .pxs-lp-done-ic {
	display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 22px;
	border-radius: 50%; background: var(--pxs-accent); color: #fff;
	box-shadow: 0 18px 40px -18px rgba(255,93,41,.85);
}
.pxs .pxs-lp-done-ic svg { width: 30px; height: 30px; }
.pxs .pxs-lp-done h3 {
	font-family: var(--pxs-sans); font-weight: 600;
	font-size: clamp(26px, 4vw, 40px); letter-spacing: -.032em; line-height: 1.08;
	color: var(--pxs-ink); margin: 0 0 12px;
}
.pxs .pxs-lp-done-t { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: var(--pxs-ink2); max-width: 34ch; margin: 0 auto 10px; }
.pxs .pxs-lp-done-s { font-size: 13.5px; line-height: 1.6; color: var(--pxs-faint); max-width: 40ch; margin: 0 auto; }

.pxs .pxs-lp-thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pxs .pxs-lp-thumbs:empty { display: none; }
.pxs .pxs-lp-thumbs { margin-top: 10px; }
.pxs .pxs-lp-thumb {
	position: relative; width: 78px; height: 78px; border-radius: 11px;
	overflow: hidden; background: rgba(0,0,0,.06);
}
.pxs .pxs-lp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs .pxs-lp-thumb.is-up img { opacity: .55; }
.pxs .pxs-lp-thumb-bar {
	position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
	background: var(--pxs-accent); transition: width .2s linear;
}
.pxs .pxs-lp-thumb-x {
	position: absolute; top: 4px; right: 4px; width: 21px; height: 21px;
	display: grid; place-items: center; padding: 0; cursor: pointer;
	border: 0; border-radius: 50%; background: rgba(15,15,15,.72); color: #fff;
	font-size: 15px; line-height: 1; opacity: 0; transition: opacity .18s;
}
.pxs .pxs-lp-thumb:hover .pxs-lp-thumb-x, .pxs .pxs-lp-thumb-x:focus-visible { opacity: 1; }
.pxs .pxs-lp-thumb.is-up .pxs-lp-thumb-x { display: none; }
.pxs .pxs-lp-up-err, .pxs .pxs-lp-err {
	margin: 8px 0 0; font-size: 13px; color: #b3261e;
	background: rgba(179,38,30,.08); border-radius: 9px; padding: 8px 12px;
}

/* ---- "what time does it get the most sun" ---- */
/* The label wraps before "(optional)" otherwise, which reads as a heading and
   an orphan rather than one sentence. */
.pxs .pxs-lp-peak { display: block; }
.pxs .pxs-lp-peak em { font-style: italic; color: var(--pxs-faint); font-weight: 400; white-space: nowrap; }
.pxs .pxs-lp-peak .pxs-lp-peakin { display: block; margin-top: 7px; max-width: 170px; }
.pxs .pxs-lp-peak-h { display: block; margin-top: 5px; font-size: 12px; color: var(--pxs-faint); }

/* ---- the sun answer ---- */
.pxs .pxs-lp-sun-note {
	display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.5;
	color: var(--pxs-faint);
}

@media (max-width: 560px) {
	.pxs .pxs-lp-search { flex-wrap: wrap; }
	.pxs .pxs-lp-ac { flex: 1 1 100%; }
	.pxs .pxs-lp-thumb { width: 68px; height: 68px; }
}

/* ==========================================================================
   Floor plans band (home page recap → the floor plans page)
   One screen tall, two columns, and every clickable thing in it goes to the
   same URL. The picture is the argument, the button is the instruction.
   ========================================================================== */
.pxs.pxs-fpband { overflow: hidden; }
.pxs.pxs-fpband:not(.pxs-fpb-tall) { padding: clamp(56px,6vw,92px) 0; }
.pxs.pxs-fpband:not(.pxs-fpb-tall) .pxs-fpb-vid { max-height: 340px; }
.pxs.pxs-fpband:not(.pxs-fpb-tall) .pxs-fpb-frame img,
.pxs.pxs-fpband:not(.pxs-fpb-tall) .pxs-fpb-frame video { max-height: 340px; }
.pxs.pxs-fpb-tall { min-height: 100svh; display: flex; align-items: center; }
.pxs.pxs-fpb-dark { background: #101013; color: #fff; }
.pxs.pxs-fpb-light { background: var(--pxs-bg); color: var(--pxs-ink); }
.pxs.pxs-fpb-dark .pxs-eyebrow { color: #ff8a5c; }
/* Avada colours headings itself and beats a bare element rule, exactly as it
   does in the impact band — so the tone has to state its heading colour. */
.pxs.pxs-fpb-dark .pxs-fpb-text h2 { color: #fff; }
.pxs.pxs-fpb-light .pxs-fpb-text h2 { color: var(--pxs-ink); }

.pxs-fpb-in { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(34px,5vw,84px); align-items: center; width: 100%; }

.pxs-fpb-text h2 { font-size: clamp(2.3rem,4.4vw,4rem); line-height: 1.02; margin-bottom: clamp(16px,2vw,24px); }
.pxs .pxs-fpb-lead { font-family: var(--pxs-body); font-size: clamp(15.5px,1.35vw,18px); line-height: 1.6; max-width: 34rem; color: var(--pxs-grey); }
.pxs.pxs-fpb-dark .pxs-fpb-lead { color: rgba(255,255,255,.78); }

.pxs-fpb-points { list-style: none; margin: clamp(24px,3vw,34px) 0 0; display: flex; flex-direction: column; gap: 13px; }
.pxs-fpb-points li { display: flex; align-items: flex-start; gap: 12px; font-size: clamp(14.5px,1.2vw,16px); line-height: 1.45; }
.pxs-fpb-points svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: var(--pxs-accent); }
.pxs .pxs-fpb-note { margin-top: clamp(18px,2.2vw,24px); font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--pxs-faint); }
.pxs.pxs-fpb-dark .pxs-fpb-note { color: rgba(255,255,255,.45); }

.pxs-fpb-cta { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px,2.4vw,32px); margin-top: clamp(26px,3.2vw,38px); }
.pxs-fpb-price { display: flex; flex-direction: column; line-height: 1.05; }
.pxs-fpb-price-f, .pxs-fpb-price-u { font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pxs-faint); }
.pxs.pxs-fpb-dark .pxs-fpb-price-f, .pxs.pxs-fpb-dark .pxs-fpb-price-u { color: rgba(255,255,255,.5); }
/* The brand orange, like every other price on the site. The yellow this was
   needed a dark stroke and a shadow to clear 1.9:1 against the band; the orange
   carries itself, so the outline goes with it. */
.pxs-fpb-price b {
	font-family: var(--pxs-sans); font-weight: 700; font-size: clamp(2rem,2.8vw,2.6rem);
	letter-spacing: -.02em; margin: 4px 0 5px;
	color: var(--pxs-accent);
	-webkit-text-stroke: 0;
	text-shadow: none;
}
.pxs.pxs-fpb-dark .pxs-fpb-price b { color: var(--pxs-accent); }
.pxs .pxs-fpb-btn { display: inline-flex; align-items: center; gap: 9px; }
/* On a wide screen the same errand already has a button at the bottom of the
   section, twice the size and next to its alternative. Two "Read more"s in one
   band is a choice the visitor should not have to make. The phone keeps this
   one — there the closing block is a long scroll away. */
@media (min-width: 901px) { .pxs .pxs-fpb-btn { display: none; } }
.pxs .pxs-fpb-btn svg { width: 17px; height: 17px; transition: transform .3s var(--pxs-ease); }
.pxs .pxs-fpb-btn:hover svg { transform: translateX(4px); }

.pxs .pxs-fpb-ghost { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pxs-sans); font-weight: 600; font-size: 14.5px; color: var(--pxs-accent); }
.pxs .pxs-fpb-ghost svg { width: 15px; height: 15px; transition: transform .3s var(--pxs-ease); }
.pxs .pxs-fpb-ghost:hover svg { transform: translateX(4px); }

/* The picture. Rounded, lifted, and it is a link — so it says so on hover. */
.pxs-fpb-shot { position: relative; display: block; min-width: 0; max-width: 100%; }
.pxs-fpb-frame { min-width: 0; max-width: 100%; }
.pxs-fpb-frame { display: block; border-radius: var(--pxs-r); overflow: hidden; background: #fff; box-shadow: 0 50px 110px -55px rgba(0,0,0,.7); transition: transform .45s var(--pxs-ease), box-shadow .45s; }
.pxs-fpb-frame img, .pxs-fpb-frame video { display: block; width: 100%; height: auto; max-height: 68svh; object-fit: contain; }
.pxs.pxs-fpb-dark .pxs-fpb-frame { background: #17171b; }
.pxs-fpb-shot.is-linked:hover .pxs-fpb-frame { transform: translateY(-6px); box-shadow: 0 62px 120px -55px rgba(0,0,0,.8); }

/* The sliding plan. The frame is a fixed window and the drawing is wider than
   it, on purpose: the whole flat drifts past instead of being shrunk to a
   sliver. Height drives the size, width is whatever the drawing needs — which
   is why max-width has to be released from the base `.pxs img` rule. */
/* Shared with the floor plans card in "everything your listing needs": the frame
   is a window, the drawing is wider than it on purpose, and height drives the
   size. max-width has to be released from the base `.pxs img` rule or the whole
   flat gets squashed into the frame instead of travelling through it. */
.pxs-pan { position: relative; overflow: hidden; }
.pxs-pan .pxs-pan-img { position: absolute; inset: 0 auto 0 0; height: 100%; width: auto; max-width: none; object-fit: cover; will-change: transform; }
.pxs-fpb-pan { height: clamp(230px, 38svh, 460px); }

/* The video from the floor plans page, with the same figures fading onto it.
   16:9 because that is what the loop is; the marks are positioned in percent so
   they land in the same places at any size. */
.pxs-fpb-vid { position: relative; aspect-ratio: 16 / 9; }
.pxs-fpb-vid video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A section that also carries a viewer is taller than a screen by definition,
   and its two blocks stack — a flex ROW would put them side by side. */
.pxs.pxs-fpb-tall { flex-direction: column; justify-content: center; gap: clamp(34px,5vw,64px); }
/* Full-bleed made the viewer the loudest thing in a section that exists to send
   people somewhere else. Sized like a figure instead. */
.pxs .pxs-wrap.pxs-fpb-viewer { width: 100%; max-width: 940px; margin-inline: auto; }
.pxs-fpb-viewer-head { text-align: center; margin-bottom: clamp(18px,2.4vw,26px); }
.pxs .pxs-fpb-viewer-head h3 { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(1.35rem,1.9vw,1.75rem) !important; line-height: 1.15 !important; letter-spacing: -.02em; }
.pxs .pxs-fpb-viewer-head p { margin-top: 8px; color: var(--pxs-grey); font-size: clamp(14px,1.15vw,15.5px); max-width: 44rem; margin-inline: auto; }
.pxs.pxs-fpb-dark .pxs-fpb-viewer-head p { color: rgba(255,255,255,.75); }
.pxs.pxs-fpb-dark .pxs-fpb-viewer-head h3 { color: #fff; }
.pxs-fpb-viewer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(16px,2.4vw,28px); margin-top: clamp(20px,2.6vw,30px); }
.pxs .pxs-fpb-viewer-cta .pxs-btn { display: inline-flex; align-items: center; gap: 9px; }
.pxs .pxs-fpb-viewer-cta .pxs-btn svg { width: 17px; height: 17px; }

/* Compact plan picker: small cards on one centred row, above the viewer, so the
   choice is a caption and the plan is the page. */
.pxs-fpcat-compact .pxs-fpcat-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pxs-fpcat-compact .pxs-fpcat-tab { flex: 0 0 auto; width: 168px; }
.pxs-fpcat-compact .pxs-fpcat-thumb { aspect-ratio: 16 / 10; }
.pxs-fpcat-compact .pxs-fpcat-cap { padding: 9px 12px 11px; }
.pxs-fpcat-compact .pxs-fpcat-cap b { font-size: 13.5px; }
.pxs-fpcat-compact .pxs-fpcat-cap span { font-size: 11.5px; margin-top: 2px; }
.pxs-fpcat-compact .pxs-fpcat-cap i { font-size: 11px; }
@media (max-width: 560px) { .pxs-fpcat-compact .pxs-fpcat-tab { width: calc(50% - 5px); } }
.pxs-pan::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,.16));
}
@media (max-width: 1024px) { .pxs-fpb-pan { height: clamp(200px, 30svh, 320px); } }

.pxs-fpb-pill {
	position: absolute; left: 50%; bottom: clamp(14px,2vw,22px); transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
	padding: 11px 20px; border-radius: 100px;
	background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,.9); box-shadow: 0 18px 40px -22px rgba(0,0,0,.6);
	font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; color: var(--pxs-ink);
	transition: background .25s, color .25s, transform .35s var(--pxs-ease);
}
.pxs-fpb-pill svg { width: 15px; height: 15px; }
.pxs-fpb-shot.is-linked:hover .pxs-fpb-pill { background: var(--pxs-accent); color: #fff; border-color: var(--pxs-accent); transform: translateX(-50%) translateY(-2px); }
.pxs-fpb-cap { display: block; margin-top: 14px; text-align: center; font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pxs-faint); }

@media (max-width: 1024px) {
	.pxs .pxs-fpb-text h2 { font-size: clamp(2rem,7vw,2.8rem) !important; line-height: 1.05 !important; }
	.pxs-fpb-in { grid-template-columns: minmax(0, 1fr); gap: clamp(30px,5vw,48px); }
	.pxs.pxs-fpb-tall { min-height: 0; display: block; }
	.pxs-fpb-frame img, .pxs-fpb-frame video { max-height: none; }
	.pxs-fpb-text h2 { font-size: clamp(2rem,7vw,2.8rem); }
}
@media (max-width: 560px) {
	/* The button sits beside the price rather than under it at full width: a
	   full-bleed primary button is the weight of a section CTA, and this is a
	   footnote to a price. */
	.pxs-fpb-cta { gap: 14px; flex-wrap: nowrap; align-items: flex-end; }
	.pxs .pxs-fpb-btn {
		width: auto; justify-content: center; flex: 0 0 auto;
		padding: 10px 18px !important; font-size: 14px !important;
		margin-bottom: 4px;
	}
	.pxs .pxs-fpb-btn svg { width: 15px; height: 15px; }
	/* ...and the viewer below gets a gap that reads as a new subject. */
	.pxs-fpb-live { margin-top: clamp(14px,4vw,26px); }
	.pxs-fpb-pill { font-size: 12.5px; padding: 9px 15px; }
}

/* ==========================================================================
   About — the studio page, and its one-breath recap on the home page
   ========================================================================== */
.pxs-about-top { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(30px,5vw,72px); align-items: center; }
.pxs .pxs-about-intro h2 { font-size: clamp(2.1rem,4vw,3.4rem) !important; line-height: 1.03 !important; margin-bottom: clamp(16px,2vw,22px); }
.pxs .pxs-about-lead { font-family: var(--pxs-body); font-size: clamp(15px,1.3vw,17.5px); line-height: 1.65; color: var(--pxs-grey); max-width: 36rem; }
.pxs .pxs-about-lead + .pxs-about-lead { margin-top: 14px; }
.pxs-about-shot { border-radius: var(--pxs-r); overflow: hidden; box-shadow: 0 44px 100px -55px rgba(0,0,0,.6); }
.pxs-about-shot img, .pxs-about-shot video { display: block; width: 100%; height: auto; }

.pxs-about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); gap: clamp(18px,3vw,34px); margin-top: clamp(40px,6vw,80px); padding-top: clamp(28px,4vw,44px); border-top: 1px solid rgba(0,0,0,.1); }
.pxs-about-stat { display: flex; flex-direction: column; gap: 8px; }
.pxs-about-stat b { font-family: var(--pxs-sans); font-weight: 700; font-size: clamp(2.2rem,3.4vw,3rem); letter-spacing: -.03em; line-height: 1; }
.pxs-about-stat span { font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pxs-faint); }

.pxs-about-do, .pxs-about-team { margin-top: clamp(56px,8vw,120px); }
.pxs .pxs-about-do h3, .pxs .pxs-about-team h3 { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(1.7rem,3vw,2.6rem) !important; line-height: 1.1 !important; letter-spacing: -.025em; }
.pxs .pxs-about-do .pxs-sec-head p, .pxs .pxs-about-team .pxs-sec-head p { margin-top: 12px; color: var(--pxs-grey); font-size: clamp(14.5px,1.2vw,16px); max-width: 40rem; }
.pxs-about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,270px),1fr)); gap: clamp(14px,2vw,22px); margin-top: clamp(24px,3vw,38px); }
.pxs-about-card { display: block; text-align: left; padding: clamp(22px,2.4vw,30px); border-radius: 20px; background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 24px 60px -46px rgba(0,0,0,.45); }
.pxs-about-card.is-linked { transition: transform .25s var(--pxs-ease), box-shadow .25s; }
.pxs-about-card.is-linked:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -44px rgba(0,0,0,.55); }
.pxs-about-num { font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .12em; color: var(--pxs-accent); }
.pxs-about-card h4 { font-family: var(--pxs-sans); font-weight: 600; font-size: 1.15rem; letter-spacing: -.015em; margin: 12px 0 8px; }
.pxs .pxs-about-card p { color: var(--pxs-grey); font-size: 14.5px; line-height: 1.6; }

.pxs-about-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,210px),1fr)); gap: clamp(18px,2.6vw,30px); margin-top: clamp(24px,3vw,38px); }
.pxs-about-person { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pxs-about-face { display: block; width: clamp(120px,14vw,168px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 14px; background: var(--pxs-bg2); }
.pxs-about-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs-about-person b { font-family: var(--pxs-sans); font-weight: 600; font-size: 16px; }
.pxs-about-person span { font-size: 13px; color: var(--pxs-faint); margin-top: 4px; }

.pxs-about-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(16px,2.4vw,28px); margin-top: clamp(46px,6vw,86px); }
.pxs .pxs-about-ig, .pxs .pxs-amini-ig { display: inline-flex; align-items: center; gap: 9px; font-family: var(--pxs-sans); font-weight: 600; font-size: 14.5px; color: var(--pxs-grey); }
.pxs .pxs-about-ig svg, .pxs .pxs-amini-ig svg { width: 18px; height: 18px; }
.pxs .pxs-about-ig:hover, .pxs .pxs-amini-ig:hover { color: var(--pxs-accent); }

/* The recap: a face, three lines, two doors. Deliberately small — it is the
   caption for the Instagram feed underneath it, not a second about page. */
.pxs.pxs-amini { background: var(--pxs-bg2); padding: clamp(56px,6vw,92px) 0; }
.pxs-amini-in { display: grid; grid-template-columns: clamp(120px,15vw,190px) minmax(0,1fr); gap: clamp(22px,3.4vw,46px); align-items: center; }
.pxs-amini-shot { border-radius: 20px; overflow: hidden; aspect-ratio: 1; box-shadow: 0 28px 60px -44px rgba(0,0,0,.55); }
.pxs-amini-shot img, .pxs-amini-shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs .pxs-amini-text h2 { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(1.4rem,2vw,1.85rem) !important; line-height: 1.15 !important; letter-spacing: -.025em; margin-bottom: 12px; }
.pxs .pxs-amini-text p { color: var(--pxs-grey); font-size: clamp(14.5px,1.2vw,16px); line-height: 1.65; max-width: 44rem; }
.pxs .pxs-amini-text p + p { margin-top: 10px; }
.pxs-amini-cta { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px,2vw,24px); margin-top: clamp(18px,2.4vw,26px); }

@media (max-width: 900px) {
	.pxs-about-top { grid-template-columns: 1fr; }
	.pxs-amini-in { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.pxs-amini-shot { width: clamp(140px,42vw,200px); }
	.pxs .pxs-amini-text p { margin-inline: auto; }
	.pxs-amini-cta { justify-content: center; }
}

/* ---- Floor plans band: the viewer IS the right-hand column --------------
   A picture of a plan asks to be believed; a plan you can drag does not. So the
   viewer takes the column the picture used to have, and the two plans to choose
   between sit under it — the catalogue renders tabs first, so the column is
   reversed rather than the markup being duplicated.
   ---------------------------------------------------------------------- */
.pxs-fpb-live { min-width: 0; }
.pxs-fpb-live .pxs-fpcat { display: flex; flex-direction: column-reverse; }
.pxs-fpb-live .pxs-fpcat-tabs { margin: clamp(12px,1.6vw,18px) 0 0; }
.pxs-fpb-live .pxs-fpcat-compact .pxs-fpcat-tab { width: calc(50% - 5px); max-width: 190px; }
/* Nearer square than the letterbox the full page uses: this column is tall, and
   a 21:8 slot in it would be a sliver. */
/* The frame follows the plan (see PXS_Plan_Catalogue::viewer), so the whole
   drawing fills it instead of floating in it. */
.pxs-fpb-live .pxs-fp-stage { aspect-ratio: var(--pxs-fp-ar, 4 / 3); max-height: 460px; }

/* A frame shaped like the plan is a short frame, and two control bars floating
   inside a 240px-tall one land on the drawing — the turn dial sat across the
   bathroom, the zoom bar across the bedroom. Both drop underneath, which is the
   same answer the phone already uses, and the plan gets the whole frame. */
.pxs-fpb-live .pxs-fp-zoomwrap { display: flex; flex-direction: column; }
.pxs-fpb-live .pxs-fp-zoomctl {
	position: static; order: 1;
	margin: 10px auto 0; width: max-content; max-width: calc(100% - 16px);
}
.pxs-fpb-live .pxs-plan-rot {
	position: static; order: 2; justify-content: center;
	margin: 8px auto 0; width: max-content; max-width: calc(100% - 16px);
}

/* Labels, thinned out where the plan is drawn small. */
.pxs-fp-stage.is-compact .pxs-fp-mark { padding: 4px 7px; border-radius: 8px; }
.pxs-fp-stage.is-compact .pxs-fp-mark b { font-size: 11px; }
.pxs-fp-stage.is-compact .pxs-fp-mark i { font-size: 10px; }
.pxs-fp-stage.is-compact .pxs-fp-mark em { display: none; }
.pxs-fpb-live .pxs-fpcat-meta { margin-bottom: 8px; }
.pxs .pxs-fpb-live-hint { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--pxs-faint); text-align: center; }

/* ---- The closing push ---------------------------------------------------
   Naming what is on the other side turns a leap into an informed click.
   ---------------------------------------------------------------------- */
.pxs-fpb-close { margin-top: clamp(44px,5vw,76px); }
/* No card. It was a white slab the width of the page holding two buttons, which
   made the buttons look like the smallest thing in it. They sit on the band. */
.pxs-fpb-close-in {
	display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px,3vw,52px);
	align-items: center; padding: clamp(20px,2.4vw,30px) 0;
	background: none; border: 0; box-shadow: none;
}
.pxs-fpb-close-t { grid-column: 1; }
.pxs .pxs-fpb-close-t h3 { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(1.5rem,2.4vw,2.1rem) !important; line-height: 1.1 !important; letter-spacing: -.025em; }
.pxs .pxs-fpb-close-t p { margin-top: 10px; color: var(--pxs-grey); font-size: clamp(14px,1.15vw,15.5px); line-height: 1.6; }
.pxs-fpb-close-list { list-style: none; grid-column: 2; display: flex; flex-direction: column; gap: 10px; }
.pxs-fpb-close-list li { display: flex; align-items: flex-start; gap: 11px; font-size: clamp(14px,1.1vw,15px); line-height: 1.45; }
.pxs-fpb-close-list svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--pxs-accent); }
.pxs-fpb-close-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px,2.2vw,26px); margin-top: clamp(6px,1vw,12px); }
.pxs .pxs-fpb-close-cta .pxs-btn { display: inline-flex; align-items: center; gap: 9px; }
.pxs .pxs-fpb-close-cta .pxs-btn svg { width: 17px; height: 17px; transition: transform .3s var(--pxs-ease); }
.pxs .pxs-fpb-close-cta .pxs-btn:hover svg { transform: translateX(4px); }

@media (max-width: 900px) {
	.pxs-fpb-close-in { grid-template-columns: 1fr; }
	.pxs-fpb-close-t, .pxs-fpb-close-list { grid-column: 1; }
	.pxs-fpb-live .pxs-fp-stage { aspect-ratio: var(--pxs-fp-ar-m, 3 / 2); }
}


/* ==========================================================================
   Mobile pass. A phone is not a narrow desktop: a section heading has to
   announce the section, the featured card has to look featured, and anything
   that is a nicety on a big screen is weight on a small one.
   ========================================================================== */
@media (max-width: 860px) {
	/* Headings that actually announce a new section. */
	.pxs .pxs-sec-head h2,
	.pxs .pxs-offer-head h2,
	.pxs .pxs-photo-title h2 { font-size: clamp(2.3rem, 9.4vw, 3.1rem) !important; line-height: 1.03 !important; letter-spacing: -.035em; }
	.pxs .pxs-plat-h2 { font-size: clamp(2.1rem, 8.6vw, 2.9rem) !important; line-height: 1.05 !important; }
	.pxs .pxs-fpb-text h2 { font-size: clamp(2.4rem, 10vw, 3.2rem) !important; }
	.pxs .pxs-eyebrow { font-size: 11.5px; letter-spacing: .2em; }

	/* The main service is the biggest thing on the card, not the smallest —
	   it was 20px against 32px on the two it is meant to lead. */
	.pxs .pxs-o3-featured .pxs-o3-body h3 { font-size: clamp(1.9rem, 8vw, 2.3rem) !important; line-height: 1.1 !important; max-width: none; }

	/* The upgrades strip is an aside on a big screen and a wall on a phone; the
	   upgrades section itself is a few scrolls further down. */
	.pxs-o3-ext { display: none !important; }

	/* Platform cards: the heading leads, the boxes follow. */
	.pxs-typecards { gap: 10px; }
	.pxs .pxs-typecard { padding: 15px 16px; border-radius: 16px; }
	.pxs .pxs-typecard-h { font-size: 1.02rem; }
	.pxs .pxs-typecard-eb { font-size: 9.5px; }
	.pxs .pxs-typecard-body p { font-size: 13.5px; line-height: 1.5; }
}

@media (max-width: 560px) {
	/* Three, so the row is spread rather than packed: on a 430px screen that is
	   a ~120px slot each instead of ~90px, which is the difference between a
	   wordmark you can read and one you can only recognise. */
	.pxs-logos { --pxs-logo-n: 3; }
	.pxs-logos-track .pxs-logo { padding: 0 8px; }
	.pxs-logo img { max-height: calc(var(--pxs-logo-h, 64px) * 1.05); }
}

/* Avada's inner builder rows carry negative gutter margins, so on a phone they
   come out wider than the screen (448px in 430px) and the ancestors' overflow
   clip shaves whatever sits at the edges — which on this page is the portfolio
   grid. Scoped to our pages so the rest of the site is untouched. */
@media (max-width: 860px) {
	.pxs-page .fusion-builder-row-inner {
		margin-left: 0 !important; margin-right: 0 !important;
		max-width: 100% !important; width: 100% !important;
	}
	.pxs-page .fusion-builder-row-inner > .fusion-layout-column { padding-left: 0 !important; padding-right: 0 !important; }
}

/* The card being chosen for them. Slow and obvious on purpose: the point is
   that they SEE the answer being filled in, not that it is already filled in
   when they arrive. */
@keyframes pxs-autopick {
	0%   { box-shadow: 0 0 0 0 rgba(255,93,41,.55); transform: scale(1); }
	45%  { box-shadow: 0 0 0 12px rgba(255,93,41,0); transform: scale(1.035); }
	70%  { transform: scale(.995); }
	100% { box-shadow: 0 0 0 0 rgba(255,93,41,0); transform: scale(1); }
}
.pxs .pxs-autopick {
	animation: pxs-autopick 1.5s cubic-bezier(.22,1,.36,1) 2;
	border-color: var(--pxs-accent) !important;
	position: relative; z-index: 2;
}
@media (prefers-reduced-motion: reduce) { .pxs .pxs-autopick { animation: none; } }

/* Pricing cards on a phone: the price is the answer, so it leads and sits
   apart from the words. Two columns — label left, price right — instead of a
   stack that reads as one long paragraph. */
@media (max-width: 700px) {
	.pxs-tier-body { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 14px; }
	.pxs-tier-eb { grid-column: 1; grid-row: 1; margin-bottom: 2px; }
	.pxs .pxs-tier-pr { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 2.3rem; }
	.pxs-tier-sz { grid-column: 1; grid-row: 2; }
	.pxs .pxs-tier-more { grid-column: 1 / -1; grid-row: 3; }
	.pxs-tier-drop { grid-column: 1 / -1; grid-row: 4; }
	/* Both buttons carry .pxs-tier-btn, so a single row put them in the same grid
	   cell, stacked exactly on top of each other. "Book a shoot" comes later in
	   the markup, so on a phone it covered "Get a quote" and took every tap meant
	   for it: the quote button was unreachable. One row each. */
	.pxs-tier-btn { grid-column: 1 / -1; grid-row: 5; }
	.pxs .pxs-tier-btn2 { grid-row: 6; margin-top: 8px; }
}

/* ---- The nav gets out of the way of anything that covers the page --------
   A modal's close button sits top-right; on a phone the floating bar sat on it
   and the X could not be reached. So the bar withdraws to the left and keeps
   only its name, the way an iOS bar collapses to its title.

   Narrow screens ONLY. On a desktop the modal is centred and 1000 deep — it was
   never covered by the bar — so collapsing the whole menu there was a glitch,
   not a fix. And never while the menu's own sheet is open, or the two states
   fight over the same width.
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
	.pxs-overlay-open .pxs-nav.pxs-nav-float:not(.pxs-nav-open) {
		width: auto;
		max-width: min(56vw, 240px);
		left: 0; right: auto;
		margin-inline: 12px;
		pointer-events: none;
		transition:
			width .55s cubic-bezier(.32,.72,0,1),
			max-width .55s cubic-bezier(.32,.72,0,1),
			margin .55s cubic-bezier(.32,.72,0,1),
			transform .55s cubic-bezier(.32,.72,0,1);
	}
	/* The links and the burger fold away first, so the bar collapses onto the
	   name instead of clipping them mid-word. */
	.pxs-overlay-open .pxs-nav.pxs-nav-float:not(.pxs-nav-open) .pxs-nav-links,
	.pxs-overlay-open .pxs-nav.pxs-nav-float:not(.pxs-nav-open) .pxs-nav-burger {
		opacity: 0; transform: translateX(-8px) scale(.94);
		pointer-events: none;
		transition: opacity .22s ease, transform .32s cubic-bezier(.32,.72,0,1);
	}
	.pxs-overlay-open .pxs-nav.pxs-nav-float:not(.pxs-nav-open) .pxs-nav-in { padding-right: 20px; }
	.pxs-overlay-open .pxs-nav-brand { pointer-events: auto; }
	/* Coming back, the width leads and the contents fade in behind it. */
	.pxs-nav.pxs-nav-float .pxs-nav-links,
	.pxs-nav.pxs-nav-float .pxs-nav-burger {
		transition: opacity .3s ease .12s, transform .38s cubic-bezier(.32,.72,0,1) .12s;
	}
}

/* The floor-plans band's phone background video is gone, and so are the rules
   that dressed it: a 20%-opacity loop nobody watches, paid for on the
   connection least able to afford it. */

/* ---- The invitation ------------------------------------------------------
   Describing what is on the next page is a paragraph nobody reads. One line
   that moves, and a button the size of the decision.
   ------------------------------------------------------------------------ */
.pxs-fpb-close-in.is-invite {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; gap: 0; padding: clamp(22px,2.8vw,34px) clamp(16px,2vw,28px);
	background: none;
}
.pxs-fpb-close-in.is-invite .pxs-fpb-close-cta { grid-column: auto; justify-content: center; margin: 0; }
.pxs-fpb-close-in.is-invite .pxs-btn {
	font-size: clamp(15px,1.5vw,18px) !important;
	padding: clamp(16px,1.8vw,21px) clamp(28px,3.4vw,44px) !important;
	letter-spacing: .01em;
	position: relative; overflow: hidden;
}
/* A slow sheen crossing the button, so it reads as an invitation rather than a
   control that happens to be there. */
.pxs-fpb-close-in.is-invite .pxs-btn::after {
	content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
	background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
	transform: skewX(-18deg);
	animation: pxs-invite-sheen 3.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes pxs-invite-sheen {
	0%, 62% { left: -60%; }
	100%    { left: 130%; }
}
.pxs-fpb-close-in.is-invite .pxs-btn svg { animation: pxs-invite-arrow 2.4s ease-in-out infinite; }
@keyframes pxs-invite-arrow { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) {
	.pxs-fpb-close-in.is-invite .pxs-btn::after,
	.pxs-fpb-close-in.is-invite .pxs-btn svg { animation: none; }
}

/* The plan picker under the viewer is a caption, not a gallery. */
.pxs-fpb-live .pxs-fpcat-compact .pxs-fpcat-tab { width: calc(50% - 5px); max-width: 150px; }
.pxs-fpb-live .pxs-fpcat-compact .pxs-fpcat-thumb { aspect-ratio: 3 / 2; }
.pxs-fpb-live .pxs-fpcat-compact .pxs-fpcat-cap { padding: 7px 10px 9px; }
.pxs-fpb-live .pxs-fpcat-compact .pxs-fpcat-cap b { font-size: 12.5px; }
.pxs-fpb-live .pxs-fpcat-compact .pxs-fpcat-cap span { font-size: 10.5px; }
.pxs-fpb-live .pxs-fpcat-compact .pxs-fpcat-cap i { font-size: 10px; }

/* ---- Social intro: the caption for the feed below it ---------------------
   This is a caption, not a section of its own, so it is sized like one and it
   shares the feed's white ground. The heading rule used to read
   `.pxs .pxs-social h2` — a descendant selector for a class that sits on the
   SAME element as `.pxs`, so it matched nothing and Avada's responsive
   typography sized the line at hero scale. Compound, not descendant.
   ------------------------------------------------------------------------ */
.pxs.pxs-social { padding: clamp(46px,5vw,74px) 0 clamp(14px,1.6vw,22px); background: #fff; }
.pxs.pxs-social h2 { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(1.5rem,2.5vw,2rem) !important; line-height: 1.12 !important; letter-spacing: -.025em; margin-top: 8px; }
.pxs .pxs-social-lead { margin: 12px auto 0; max-width: 46rem; color: var(--pxs-grey); font-size: clamp(14.5px,1.2vw,16.5px); line-height: 1.6; }
.pxs-social-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px,2vw,22px); margin-top: clamp(16px,2vw,22px); }
.pxs .pxs-social-ig { display: inline-flex; align-items: center; gap: 10px; }
.pxs .pxs-social-ig svg { width: 19px; height: 19px; }
.pxs .pxs-social-tt {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 13px 24px; border-radius: 100px;
	background: #111; color: #fff;
	font-family: var(--pxs-sans); font-weight: 600; font-size: 14.5px;
	transition: transform .2s var(--pxs-ease), background .2s;
}
.pxs .pxs-social-tt svg { width: 17px; height: 17px; }
.pxs .pxs-social-tt:hover { background: #000; transform: translateY(-2px); }
@media (max-width: 860px) {
	/* Still a caption on a phone — smaller than a section head, big enough to
	   read as a heading. */
	.pxs.pxs-social h2 { font-size: clamp(1.55rem,6vw,1.95rem) !important; }
	.pxs.pxs-social { padding-top: clamp(38px,8vw,54px); }
}
@media (max-width: 560px) {
	.pxs-social-cta { flex-direction: column; align-items: stretch; }
	.pxs .pxs-social-ig, .pxs .pxs-social-tt { justify-content: center; }
}

/* ---- ...and the feed below it, joined to it ------------------------------
   The caption and the Instagram grid are two separate Avada rows, so they read
   as two things: a grey band, a 20px column margin, then a white widget with
   its own profile header. One white ground, no gap and no plugin chrome makes
   the pair read as the single section it is meant to be.
   `:has()` rather than a JS-applied class on purpose — the feed is
   server-rendered, so the selector matches at first paint and there is no
   flash of the old grey band. `initSocialJoin()` covers browsers without it.
   ------------------------------------------------------------------------ */
.pxs-page .fusion-fullwidth:has(#pixel-social),
.pxs-page .fusion-fullwidth:has(#sb_instagram),
.pxs-page .fusion-fullwidth.pxs-ig-row { background-color: #fff; }
.pxs-page .fusion-fullwidth:has(#pixel-about-short) .fusion-layout-column,
.pxs-page .fusion-fullwidth:has(#pixel-social) .fusion-layout-column,
.pxs-page .fusion-fullwidth:has(#sb_instagram) .fusion-layout-column,
.pxs-page .fusion-fullwidth.pxs-ig-row .fusion-layout-column { margin-bottom: 0 !important; }
.pxs-page #sb_instagram { background: #fff; padding-bottom: clamp(34px,4vw,56px) !important; }
/* The plugin's own avatar-and-bio header is what makes the grid look bolted on;
   the caption above it already says whose feed this is. */
.pxs-page #sb_instagram .sb_instagram_header { display: none !important; }

/* ---- FAQ: grouped, and two columns where there is room -------------------
   Sixteen questions in one column is a wall. Grouping them by what someone is
   actually wondering about — booking, the shoot, delivery — lets them skip to
   their own question, and columns stop the section owning half the page.
   Masonry columns rather than a grid: a group must not be split down the
   middle, and `break-inside: avoid` on the group guarantees that.
   ------------------------------------------------------------------------ */
.pxs-faqwrap.is-grouped { text-align: left; }
.pxs-faq-group { break-inside: avoid; page-break-inside: avoid; }
.pxs-faq-group + .pxs-faq-group { margin-top: clamp(26px,3vw,40px); }
.pxs .pxs-faq-cat {
	font-family: var(--pxs-mono); font-weight: 500; font-size: 11px !important;
	letter-spacing: .16em; text-transform: uppercase; color: var(--pxs-accent);
	margin-bottom: 12px; padding-left: 2px;
}
@media (min-width: 900px) {
	.pxs-faqwrap.is-grouped { column-count: 2; column-gap: clamp(22px,2.6vw,40px); }
	.pxs-faqwrap.is-grouped .pxs-faq-group { display: inline-block; width: 100%; }
	.pxs-faq-group + .pxs-faq-group { margin-top: 0; }
	.pxs-faqwrap.is-grouped .pxs-faq-group { margin-bottom: clamp(24px,2.8vw,38px); }
}
/* Three across once the wrap is wide enough to keep a readable measure: the
   grouped list stops being 820px of column and stretches to the section's own
   width, which is what makes a third column fit at ~350px each. */
@media (min-width: 1180px) {
	.pxs .pxs-faqwrap.is-grouped { max-width: 1180px; }
	.pxs-faqwrap.is-grouped { column-count: 3; column-gap: clamp(26px,2.4vw,36px); }
	.pxs-faqwrap.is-grouped summary { font-size: 16.5px; padding-right: 34px; }
	.pxs-faqwrap.is-grouped details { padding: 0 18px; }
}
/* ...and then JavaScript takes the columns over.
   CSS multicol balances by filling each column to a target height and moving
   on, which with five unbreakable groups of 1, 5, 5, 4 and 1 questions put
   nine in the middle column and one on its own on the right. `initFaqColumns`
   measures the groups and picks the split that makes the tallest column as
   short as possible, keeping them in reading order. These rules are what it
   lays the result out in; without JS the multicol above still stands. */
.pxs-faqwrap.is-jscols { column-count: 1 !important; }
.pxs-faq-cols { display: flex; align-items: flex-start; gap: clamp(24px,2.4vw,36px); }
.pxs-faq-col { flex: 1 1 0; min-width: 0; }
.pxs-faq-col > .pxs-faq-group { display: block; width: auto; margin-bottom: 0; }
.pxs-faq-col > .pxs-faq-group + .pxs-faq-group { margin-top: clamp(26px,3vw,40px); }
.pxs .pxs-fpb-live-t { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(1.15rem,1.6vw,1.5rem) !important; line-height: 1.15 !important; letter-spacing: -.02em; margin-bottom: clamp(12px,1.4vw,16px); }
@media (max-width: 900px) { .pxs .pxs-fpb-live-t { text-align: center; font-size: clamp(1.3rem,5.6vw,1.7rem) !important; } }

/* ==========================================================================
   Footer. A footer is the last impression, so it gets built rather than
   dumped: three things to find (who we are, where to go, who to ask) and a
   thin bar for everything a lawyer requires. Dark, wide-tracked, with a hair
   of colour bleeding up through the top edge.
   ========================================================================== */
/* Flat, all the way across. There was a warm radial glow bleeding down from the
   top-left and a gradient hairline along the top edge; on a wide screen that
   read as a brown wash over a third of the footer, and it never appeared on a
   phone at all, so the footer looked like two different designs. Black. */
.pxs.pxs-footer { position: relative; overflow: hidden; }
.pxs-foot-in { position: relative; z-index: 1; }
.pxs .pxs-foot-top { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.52fr) minmax(0,1.05fr); gap: clamp(26px,3.2vw,54px); align-items: start; }

/* `.pxs .pxs-foot-logo` further up still sets 22px/800 from the old footer at
   (0,2,0), so a bare class here silently lost and the brand name has been
   rendering at the pre-rebuild size ever since. Scoped to match. */
.pxs .pxs-foot-logo { font-family: var(--pxs-sans); font-weight: 700; font-size: clamp(1.5rem,2.4vw,2rem); letter-spacing: -.035em; display: block; }
.pxs .pxs-foot-about { margin-top: 14px; max-width: 34rem; color: rgba(255,255,255,.62); font-size: clamp(14px,1.15vw,15.5px); line-height: 1.65; }

.pxs-foot-reach { display: flex; flex-direction: column; gap: 10px; margin-top: clamp(20px,2.4vw,28px); }
.pxs .pxs-foot-reach-a {
	display: inline-flex; align-items: center; gap: 11px; width: fit-content;
	font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(15px,1.3vw,17px);
	color: #fff; transition: color .2s;
}
.pxs .pxs-foot-reach-a svg { width: 17px; height: 17px; color: var(--pxs-accent); flex: 0 0 auto; }
.pxs .pxs-foot-reach-a:hover { color: var(--pxs-accent); }

/* The person you are actually contacting. */
.pxs-foot-ask {
	display: flex; gap: clamp(14px,1.8vw,20px); align-items: flex-start;
	padding: clamp(20px,2.2vw,26px); border-radius: 20px;
	background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
}
.pxs-foot-face { flex: 0 0 auto; width: clamp(54px,4.6vw,64px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.08); }
.pxs-foot-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxs-foot-ask-t { display: flex; flex-direction: column; min-width: 0; }
.pxs-foot-ask-t b { font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(16px,1.35vw,18px); line-height: 1.2; color: #fff; letter-spacing: -.02em; text-wrap: balance; }
.pxs-foot-ask-t span { margin-top: 5px; color: rgba(255,255,255,.6); font-size: 13.5px; line-height: 1.55; }
.pxs-foot-ask-t i { margin-top: 9px; font-style: normal; font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.pxs-foot-ask-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.pxs .pxs-foot-ask-btns .pxs-btn { padding: 11px 22px !important; font-size: 14px !important; }
.pxs .pxs-foot-ask-alt { font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.72); }
.pxs .pxs-foot-ask-alt:hover { color: var(--pxs-accent); }

/* ---- Follow, under the description --------------------------------------
   The brand column ran out of content halfway down and the feed is the freshest
   proof on the site, so it goes where the eye already is.
   ------------------------------------------------------------------------ */
.pxs-foot-social { margin-top: clamp(22px,2.6vw,30px); }
.pxs .pxs-foot-social-h {
	display: block; margin-bottom: 12px;
	font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--pxs-accent);
}
.pxs-foot-social-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pxs .pxs-foot-soc {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 10px 18px; border-radius: 100px;
	border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
	color: #fff; font-family: var(--pxs-sans); font-weight: 600; font-size: 14px;
	transition: border-color .2s, background .2s, color .2s;
}
.pxs .pxs-foot-soc svg { width: 17px; height: 17px; flex: 0 0 auto; }
.pxs .pxs-foot-soc:hover { border-color: var(--pxs-accent); color: var(--pxs-accent); background: rgba(255,93,41,.08); }

/* ---- Portfolio owners get their own band --------------------------------
   Somebody with eleven flats is not asking the question the rest of the page
   answers, and as the eighth item in a link list nobody was going to find it.
   ------------------------------------------------------------------------ */
/* A note in the corner, not a banner. It was a full-width bordered card with a
   1.35rem heading, two lines of text and a section-sized button — the loudest
   thing in the footer for the narrowest audience in it. */
.pxs-foot-multi { grid-area: multi; align-self: start; }
.pxs-foot-multi-t { display: flex; flex-direction: column; min-width: 0; }
.pxs .pxs-foot-multi-t b {
	font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(14.5px,1.15vw,16px);
	line-height: 1.3; letter-spacing: -.015em; color: #fff;
}
.pxs .pxs-foot-multi-t span { margin-top: 6px; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.55; }
.pxs .pxs-foot-multi-b {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
	font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px;
	color: var(--pxs-accent); transition: gap .2s var(--pxs-ease);
}
.pxs .pxs-foot-multi-b:hover { gap: 11px; }
.pxs .pxs-foot-multi-b svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* The bar: one line of the required things, out of the way. */
.pxs-foot-bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 14px; margin-top: clamp(36px,4.5vw,60px); padding-top: clamp(18px,2vw,26px);
	border-top: 1px solid rgba(255,255,255,.1);
	font-family: var(--pxs-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
	color: rgba(255,255,255,.38);
}
.pxs-foot-bar-links { display: flex; flex-wrap: wrap; gap: clamp(14px,2vw,26px); }
.pxs .pxs-foot-bar-links a { color: rgba(255,255,255,.55); transition: color .2s; }
.pxs .pxs-foot-bar-links a:hover { color: var(--pxs-accent); }

.pxs-foot-bar { padding-bottom: clamp(10px,1.4vw,18px); }

@media (max-width: 900px) {
	.pxs .pxs-foot-top { grid-template-columns: 1fr; gap: clamp(28px,5vw,40px); }
	.pxs-foot-bar { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 14px; }
}

/* ---- Footer contact card, rebuilt ---------------------------------------
   Face on top, then the ask, then the two ways to reach him, then the plain
   address and number as a fallback for anyone who wants to copy them.
   ------------------------------------------------------------------------ */
.pxs-foot-ask { display: block; }
.pxs-foot-ask .pxs-foot-face { display: block; margin-bottom: 14px; width: clamp(60px,5vw,72px); }
.pxs-foot-ask-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.pxs .pxs-foot-ask-wa {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 11px 22px; border-radius: 100px;
	border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.9);
	font-family: var(--pxs-sans); font-weight: 600; font-size: 14px;
	transition: border-color .2s, color .2s, background .2s;
}
.pxs .pxs-foot-ask-wa:hover { border-color: var(--pxs-accent); color: var(--pxs-accent); background: rgba(255,93,41,.08); }
.pxs-foot-ask-raw { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.09); }
.pxs .pxs-foot-ask-raw a {
	display: inline-flex; align-items: center; gap: 10px; width: fit-content;
	font-size: 13.5px; color: rgba(255,255,255,.72); transition: color .2s;
}
.pxs .pxs-foot-ask-raw a svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--pxs-accent); }
.pxs .pxs-foot-ask-raw a:hover { color: var(--pxs-accent); }

/* Ordered: who we are, who to ask, then where to go. The person comes before
   the sitemap, because that is the order someone in a footer needs them. */
.pxs .pxs-foot-top {
	grid-template-areas: 'brand ask explore' 'brand ask multi';
	grid-template-columns: minmax(0,1.15fr) minmax(0,.95fr) minmax(0,.62fr);
	grid-template-rows: auto 1fr;
}
.pxs-foot-brand { grid-area: brand; }
.pxs-foot-ask { grid-area: ask; }
.pxs-foot-explore { grid-area: explore; }

@media (max-width: 900px) {
	/* Explore on the left, the portfolio note on the right: two short columns
	   instead of two more full-width bands to scroll past. */
	.pxs .pxs-foot-top {
		grid-template-areas: 'brand brand' 'ask ask' 'explore multi';
		grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	}
	.pxs-foot-multi { padding-top: 2px; }
	.pxs-foot-ask { padding: clamp(20px,5vw,26px); }
	.pxs-foot-ask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.pxs .pxs-foot-ask-btns .pxs-btn { width: 100%; justify-content: center; }
}

/* The wizard's action needs room under it: on a short phone the Continue button
   was landing flush against the bottom edge and getting clipped by the browser
   chrome that appears on scroll. */
@media (max-width: 860px) {
	.pxs-bk-foot { padding-bottom: clamp(18px, 5vw, 30px); }
	.pxs-booking { padding-bottom: clamp(34px, 8vw, 60px); }
}

/* ---- Viewer controls, sized by how often they are used -------------------
   Matterport gets this right: the thing you reach for constantly — full screen
   — is a large target, and the fine controls are small beside it. Ours had them
   all the same size, which makes the common action as fiddly as the rare one.
   ------------------------------------------------------------------------ */
.pxs-fp-zoomctl [data-pxs-fp-full],
.pxs-fp-zoomctl .pxs-fp-fullbtn {
	width: 44px; height: 44px; border-radius: 14px;
	background: var(--pxs-accent); color: #fff;
	box-shadow: 0 8px 22px -10px rgba(255,93,41,.9);
}
.pxs-fp-zoomctl [data-pxs-fp-full] svg,
.pxs-fp-zoomctl .pxs-fp-fullbtn svg { width: 20px; height: 20px; }
.pxs-fp-zoomctl [data-pxs-fp-full]:hover { filter: brightness(1.06); }

@media (max-width: 900px) {
	/* The rotation dial is a fine adjustment and was taking the width of the
	   frame; the fullscreen button is the one a thumb goes for. */
	.pxs-fp-rotbar, .pxs-fp-rot { transform: scale(.82); transform-origin: right top; }
	/* The viewer stops hugging the screen edges, so there is somewhere to put a
	   thumb that scrolls the page instead of dragging the plan. */
	.pxs-fpb-live { padding-inline: 6px; }
	.pxs-fpb-live .pxs-fp-stage { border-radius: 16px; }
	.pxs .pxs-wrap.pxs-fpb-viewer { padding-left: 14px; padding-right: 14px; }
}

/* ---- The plan viewer inside the "Read more" overlay -----------------------
   The viewer takes the pointer: `touch-action: none` while it is pannable, so
   a finger anywhere on it drags the plan instead of scrolling the page. At
   392px of a 430px screen that left almost nowhere to put a thumb, and the
   overlay felt stuck. Narrower and shorter on a phone, centred, with real
   gutters either side to scroll in.
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
	/* The whole viewer narrows, not just the plan inside it — a small plan in a
	   full-width frame looks like a mistake, and the frame is what the gutters
	   have to sit outside of. */
	.pxs-bk-more .pxs-fp-zoomwrap {
		width: min(100%, 300px);
		margin-inline: auto;
	}
	.pxs-bk-more .pxs-fp-stage,
	.pxs-bk-more .pxs-fp-zoom.has-picker .pxs-fp-stage {
		aspect-ratio: 3 / 4;
		min-height: 0;
		max-height: 46vh;
		border-radius: 16px;
	}
}

/* ---- "Read more" as a popup ----------------------------------------------
   The glass panel is moved here from inside its card, so it arrives with all
   of its own styling and only needs to be told to behave like flow content
   rather than an absolutely-positioned overlay.
   ------------------------------------------------------------------------ */
.pxs-cardpop { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: clamp(14px,4vw,40px); }
.pxs-cardpop[hidden] { display: none !important; }
.pxs-cardpop-bg { position: absolute; inset: 0; background: rgba(10,10,14,.58); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.pxs-cardpop-box {
	position: relative; width: min(540px, 100%); max-height: min(84vh, 700px);
	overflow: auto; overscroll-behavior: contain;
	border-radius: clamp(20px,3vw,26px);
	box-shadow: 0 40px 90px -34px rgba(0,0,0,.7);
}
.pxs .pxs-cardpop-x {
	position: absolute; top: 12px; right: 12px; z-index: 5;
	width: 38px; height: 38px; border-radius: 50%; border: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	transition: background .2s;
}
.pxs .pxs-cardpop-x:hover { background: rgba(255,255,255,.3); }
.pxs .pxs-cardpop-x svg { width: 17px; height: 17px; }
.pxs-cardpop-slot { position: relative; }
/* Out of the card, into the flow. */
.pxs-cardpop .pxs-up-glass { position: relative; inset: auto; opacity: 1; pointer-events: auto; display: block; }
.pxs-cardpop .pxs-up-glass-in { transform: none; justify-content: flex-start; padding: clamp(24px,5vw,32px); overflow: visible; }
.pxs-cardpop .pxs-up-glass-in > * { opacity: 1; transform: none; transition: none; }
/* The card's own close affordance is a 12px cross meant for a small panel; the
   popup has a real one. */
.pxs-cardpop .pxs-up-x { display: none !important; }

/* ---- Instagram feed, capped at four --------------------------------------
   Smash Balloon v6 takes its post count from the feed builder, not from the
   shortcode, so `num=4` on the shortcode is silently ignored. Until that
   setting is changed in the plugin itself this caps what is shown; the feed
   still fetches its full set, so the real fix is the plugin's own "number of
   posts" field.
   ------------------------------------------------------------------------ */
.pxs-page #sb_instagram .sbi_item:nth-of-type(n+5) { display: none !important; }
.pxs-page #sb_instagram #sbi_load,
.pxs-page #sb_instagram .sbi_load_btn { display: none !important; }
/* Four across on a wide screen, two on a phone — a single row either way. */
@media (min-width: 901px) { .pxs-page #sb_instagram #sbi_images { grid-template-columns: repeat(4, 1fr); } }
/* ...and on the site's own width, not the screen's. Every other section stops
   at 1280; a feed running to both edges read as somebody else's widget. */
.pxs-page #sb_instagram {
	max-width: var(--pxs-wrap, 1280px);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
	box-sizing: border-box;
}

/* ==========================================================================
   Confirm page: offered days, the access choice, and the booked screen.
   ========================================================================== */
.pxs-cf-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pxs .pxs-cf-slot {
	display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
	padding: 14px 16px; border-radius: 14px; cursor: pointer; text-align: left;
	border: 1.5px solid rgba(0,0,0,.10); background: #fff;
	transition: border-color .18s var(--pxs-ease), transform .18s var(--pxs-ease), box-shadow .18s;
}
.pxs .pxs-cf-slot b { font-family: var(--pxs-sans); font-weight: 700; font-size: 15px; color: var(--pxs-ink); }
.pxs .pxs-cf-slot span { font-size: 13px; color: var(--pxs-grey); }
.pxs .pxs-cf-slot:hover { border-color: rgba(255,93,41,.5); transform: translateY(-1px); }
.pxs .pxs-cf-slot.is-sel { border-color: var(--pxs-accent); box-shadow: 0 0 0 3px rgba(255,93,41,.14); }
.pxs .pxs-cf-slot.is-sel b { color: var(--pxs-accent); }
.pxs .pxs-cf-noneworks a { color: var(--pxs-accent); font-weight: 600; }

.pxs-cf-access { display: grid; gap: 10px; }
@media (min-width: 620px) { .pxs-cf-access { grid-template-columns: 1fr 1fr; } }
.pxs .pxs-cf-acc {
	display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left;
	padding: 15px 17px; border-radius: 14px; cursor: pointer;
	border: 1.5px solid rgba(0,0,0,.10); background: #fff;
	transition: border-color .18s var(--pxs-ease), box-shadow .18s;
}
.pxs .pxs-cf-acc b { font-family: var(--pxs-sans); font-weight: 600; font-size: 14.5px; color: var(--pxs-ink); line-height: 1.25; }
.pxs .pxs-cf-acc span { font-size: 12.5px; color: var(--pxs-grey); line-height: 1.5; }
.pxs .pxs-cf-acc:hover { border-color: rgba(255,93,41,.5); }
.pxs .pxs-cf-acc.is-sel { border-color: var(--pxs-accent); box-shadow: 0 0 0 3px rgba(255,93,41,.14); }

/* Green, and only here: this is the one button on the site that ends in a
   commitment being made rather than a form being sent. */
.pxs .pxs-btn.pxs-cf-go.is-book { background: #1a9d4b; box-shadow: 0 14px 30px -18px rgba(26,157,75,.9); }
.pxs .pxs-btn.pxs-cf-go.is-book:hover { background: #178b42; }

/* `.pxs .pxs-cf-ok` already exists further up as an orange notice box at
   (0,2,0), so a lone class here would have lost padding and background to it.
   Same specificity, later in the file. */
.pxs .pxs-cf-ok {
	text-align: center; padding: clamp(22px,3vw,34px) 0 0;
	background: none; border: 0; border-radius: 0; font-size: inherit;
}
.pxs-cf-ok-mark {
	width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
	display: grid; place-items: center; color: #fff; background: #1a9d4b;
	box-shadow: 0 16px 34px -18px rgba(26,157,75,.85);
}
.pxs-cf-ok-mark svg { width: 28px; height: 28px; }
/* `.pxs .pxs-cf-ok b` above paints every bold child accent-orange, which put an
   orange headline next to a green tick. The green mark carries the news. */
.pxs .pxs-cf-ok b.pxs-cf-ok-h { display: block; font-family: var(--pxs-sans); font-weight: 700; font-size: clamp(1.7rem,4.4vw,2.3rem); letter-spacing: -.03em; color: var(--pxs-ink); }
.pxs .pxs-cf-ok-date { margin-top: 6px; font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(15px,1.6vw,17px); color: var(--pxs-accent); }
.pxs .pxs-cf-ok > p { margin-top: 10px; color: var(--pxs-grey); font-size: 15px; line-height: 1.6; max-width: 34rem; margin-inline: auto; }

.pxs-cf-know {
	margin-top: clamp(26px,3.4vw,38px); padding: clamp(20px,2.6vw,28px);
	border-radius: 18px; background: rgba(0,0,0,.035); text-align: left;
}
.pxs .pxs-cf-know-h {
	display: block; font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--pxs-accent); margin-bottom: 12px;
}
.pxs-cf-help {
	margin-top: 18px; padding: clamp(18px,2.2vw,24px); border-radius: 18px; text-align: left;
	border: 1px solid rgba(255,93,41,.28); background: rgba(255,93,41,.05);
}
.pxs .pxs-cf-help b { display: block; font-family: var(--pxs-sans); font-weight: 600; font-size: 15.5px; color: var(--pxs-ink); }
.pxs .pxs-cf-help > span { display: block; margin-top: 4px; color: var(--pxs-grey); font-size: 13.5px; line-height: 1.55; }
.pxs-cf-help-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.pxs .pxs-cf-help-alt { font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; color: var(--pxs-grey); }
.pxs .pxs-cf-help-alt:hover { color: var(--pxs-accent); }

/* ---- Listing-link page: the one thing the email actually asked for --------
   A card, at the top, marked required, holding both answers to the same
   question. It used to be an unlabelled text input sitting above an address
   field that shouted REQUIRED, with the photo alternative 1500px below it.
   -------------------------------------------------------------------------- */
.pxs-lp-look {
	display: block; margin: 0 0 4px;
	padding: clamp(18px,3vw,24px);
	border-radius: 18px;
	border: 1.5px solid rgba(255,93,41,.34);
	background: rgba(255,93,41,.045);
}
.pxs .pxs-lp-look-t {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	font-family: var(--pxs-sans); font-weight: 600; font-size: clamp(16px,1.6vw,18px);
	letter-spacing: -.02em; color: var(--pxs-ink);
}
.pxs .pxs-lp-look-s { display: block; margin-top: 6px; color: var(--pxs-grey); font-size: 13.5px; line-height: 1.55; }
.pxs .pxs-lp-look-l { display: block; margin-top: 16px; }
/* A rule with the word in the middle: two answers, either will do. */
.pxs-lp-look-or {
	display: flex; align-items: center; gap: 12px; margin: 16px 0 14px;
	font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--pxs-faint);
}
.pxs-lp-look-or i { flex: 1 1 auto; height: 1px; background: rgba(0,0,0,.10); }
.pxs-lp-look .pxs-lp-up { margin-top: 0; }

/* A thumbnail on its way out: dimmed while the server is asked, gone only when
   it agrees. */
.pxs-lp-thumb.is-going { opacity: .4; pointer-events: none; transition: opacity .2s; }

/* ---- The nav as a place indicator ----------------------------------------
   The link for the section you are in grows and turns yellow, the rest shrink
   back and the strip slides to keep the live one in view. The bar stops being
   a list of destinations and becomes a caption for where you already are.
   -------------------------------------------------------------------------- */
.pxs .pxs-nav-links { transition: none; }
.pxs .pxs-nav-link {
	position: relative;
	transition: color .28s var(--pxs-ease), font-size .28s var(--pxs-ease), opacity .28s var(--pxs-ease);
}
/* Everything that is NOT the live one steps back, so the difference is a
   comparison rather than one loud word. */
.pxs-nav-links:has(.pxs-nav-link.is-here) .pxs-nav-link:not(.is-here) {
	font-size: 13.5px; opacity: .55;
}
/* The live one is just bigger and in the brand orange. The gold this used to
   be needed a stroke and a shadow to survive on a pale bar, and a colour that
   has to be outlined to be legible is the wrong colour. */
.pxs .pxs-nav-link.is-here {
	font-size: 17px; font-weight: 700; letter-spacing: -.02em;
	color: var(--pxs-accent);
	-webkit-text-stroke: 0; text-shadow: none;
}
.pxs .pxs-nav-link.is-here::after { content: none; }

/* On a phone the links live in the full-screen sheet, where a sliding caption
   makes no sense — the live one is simply marked. */
@media (max-width: 860px) {
	.pxs-nav-links:has(.pxs-nav-link.is-here) .pxs-nav-link:not(.is-here) { font-size: 26px; opacity: 1; }
	.pxs .pxs-nav-links .pxs-nav-link.is-here { font-size: 26px; }
	.pxs .pxs-nav-link.is-here::after { display: none; }
}

/* The burger as an Avada off-canvas link: same box, no underline, no sheet. */
.pxs .pxs-nav-burger-oc { text-decoration: none !important; }

/* --- The off-canvas panel the burger opens ---------------------------------
 * Luka's own Avada panel, built when it held four short words. The menu and
 * the close button live in two half-width columns, so a 186px column has to
 * carry 64px type: "Photography" ran a clean 190px past its column and under
 * the X. Rather than shrink the type — the size is the whole look — the menu
 * takes the full width and the X moves to the corner it was already reaching
 * for. Selectors go through the close link's own href and the menu element,
 * not Avada's generated column numbers, so rebuilding the panel in the
 * builder cannot silently unhook them. */
.pxs-oc-menu .fusion-builder-row:has(> .fusion-layout-column > .fusion-column-wrapper > [href^="#awb-close-oc"]) {
	position: relative;
}
.pxs-oc-menu .fusion-layout-column:has(> .fusion-column-wrapper > .awb-menu) {
	width: 100% !important;
	max-width: 100% !important;
	flex-basis: 100% !important;
}
.pxs-oc-menu .fusion-layout-column:has(> .fusion-column-wrapper > [href^="#awb-close-oc"]) {
	/* Fixed, not absolute: the panel scrolls well past one screen, and a close
	   button you have to scroll back up to reach is not a close button. */
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: auto !important;
	max-width: none !important;
	flex-basis: auto !important;
	margin: 0 !important;
}

/* Long words now have the width, but not infinite width: hold the type to
 * what the panel can actually show so nothing wraps to a lonely second line. */
.pxs-oc-menu .awb-menu.awb-menu_column {
	--awb-font-size: clamp(30px, 13vw, 64px) !important;
}

/* Avada paints "current" items in the theme's orange. Every home-page link
 * here is a fragment of the home page, so on the home page four items claim
 * to be current at once — a highlight that points everywhere points nowhere.
 * One colour for all of them; the panel is over the page, not beside it. */
.pxs-oc-menu .awb-menu.awb-menu_column {
	--awb-active-color: var(--awb-color) !important;
	--awb-active-color-hover: var(--awb-color-hover) !important;
}

/* One exception: the quote link is the action, not a destination, and on the
 * desktop bar it is the one accent-coloured thing in a row of neutral links.
 * Same job here. (#ff5d29 is --pxs-accent, which lives on .pxs and so cannot
 * be reached from inside Avada's panel.)
 *
 * Matched on both form anchors: the menu item was repointed from #pixel-booking
 * to #pixel-getquote when the funnel was split, and a selector naming only the
 * old target silently stopped applying — the accent vanished with no error.
 *
 * The extra .awb-menu is not decoration: Avada's current-item rule
 * (.awb-menu__main-li_regular.current-menu-ancestor .awb-menu__main-a_regular)
 * is also 0,3,0 and also !important, and it loads after us — a tie goes to
 * whoever is later, so this has to be 0,4,0 to win. */
.pxs-oc-menu .awb-menu .awb-menu__main-a[href*="#pixel-getquote"],
.pxs-oc-menu .awb-menu .awb-menu__main-a[href*="#pixel-getquote"]:hover,
.pxs-oc-menu .awb-menu .awb-menu__main-a[href*="#pixel-booking"],
.pxs-oc-menu .awb-menu .awb-menu__main-a[href*="#pixel-booking"]:hover {
	color: #ff5d29 !important;
}

/* --- The pinned close on an off-canvas panel --------------------------------
 * The portfolio panel is six screens deep and its only way out was a small
 * back-arrow at the top, so reaching the last photo meant scrolling all the way
 * back up to leave. This sits in the corner and stays there. It is only ever
 * shown while the panel is open, so it cannot swallow clicks on the page
 * underneath, and it carries its own contrast because it floats over whatever
 * photograph happens to be behind it. */
.pxs-oc-x { display: none; }
.awb-off-canvas-wrap.awb-show .pxs-oc-x {
	display: flex;
	position: fixed;
	top: calc(14px + env(safe-area-inset-top, 0px));
	right: calc(14px + env(safe-area-inset-right, 0px));
	z-index: 20;
	width: 52px;
	height: 52px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	background: rgba(16, 16, 16, .62);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	box-shadow: 0 6px 22px -8px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .18);
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}
/* The glyph never takes the click, so the anchor is always the event target. */
.awb-off-canvas-wrap.awb-show .pxs-oc-x svg { width: 22px; height: 22px; display: block; pointer-events: none; }
.awb-off-canvas-wrap.awb-show .pxs-oc-x:hover,
.awb-off-canvas-wrap.awb-show .pxs-oc-x:focus-visible {
	background: rgba(255, 93, 41, .95);
	transform: scale(1.06);
}
@media (min-width: 861px) {
	.awb-off-canvas-wrap.awb-show .pxs-oc-x {
		top: calc(22px + env(safe-area-inset-top, 0px));
		right: calc(24px + env(safe-area-inset-right, 0px));
		width: 58px;
		height: 58px;
	}
	.awb-off-canvas-wrap.awb-show .pxs-oc-x svg { width: 24px; height: 24px; }
}

/* --- The section strip: the desktop bar's job, done on a phone -------------
 * A burger hides the site behind a tap. This puts the same six sections on
 * screen permanently, as a strip that scrolls sideways and keeps the section
 * you are actually in centred in it, so the menu doubles as a place indicator
 * the whole way down the page. The quote button sits beside the burger so
 * booking is never more than one tap away.
 *
 * Desktop never sees it — the bar it duplicates is right there. */
.pxs-nav-strip { display: none; }
/* .pxs .pxs-btn sets its own display and outranks a bare class, so hiding this
   one has to be said at the same weight. */
.pxs .pxs-nav-cta-m { display: none; }

@media (max-width: 860px) {
	.pxs-nav-in { flex-wrap: wrap; row-gap: 0; column-gap: 10px; }

	.pxs .pxs-nav-cta-m {
		display: inline-flex;
		order: 2;
		margin: 0 !important;
		padding: 9px 15px !important;
		font-size: 13px !important;
		white-space: nowrap;
	}
	.pxs-nav-brand { order: 1; flex: 1 1 auto; min-width: 0; }
	.pxs-nav-burger { order: 3; }

	.pxs-nav-strip {
		display: flex;
		order: 4;
		flex: 0 0 100%;
		gap: 16px;
		align-items: center;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		margin-top: 8px;
		padding-bottom: 2px;
		/* Bleed to the pill's edges so the first and last item can sit flush
		   against them, with the padding put back inside the scroller. */
		margin-left: -14px;
		margin-right: -14px;
		padding-left: 14px;
		padding-right: 14px;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
	}
	.pxs-nav-strip::-webkit-scrollbar { display: none; }
	.pxs-nav-strip .pxs-nav-link {
		flex: 0 0 auto;
		width: auto;
		border-bottom: 0;
		font-size: 13px;
		line-height: 1;
		padding: 5px 0;
		opacity: .55;
		white-space: nowrap;
	}
	.pxs-nav-strip .pxs-nav-link.is-here { font-size: 14px; opacity: 1; }

	/* Once they are reading, the name has done its job and the sections have
	   not: the brand steps out and the strip moves up beside the buttons. */
	.pxs-nav.is-scrolled .pxs-nav-brand, .pxs-nav.pxs-nav-nobrand .pxs-nav-brand { display: none; }
	/* Without the name on a phone the bar is that one-row shape from the top. */
	.pxs-nav.is-scrolled .pxs-nav-strip, .pxs-nav.pxs-nav-nobrand .pxs-nav-strip {
		/* Basis 0, not auto: at auto the strip is measured at its full content
		   width, does not fit beside the buttons, and wraps straight back onto
		   a second row — which is the thing this is meant to get rid of. */
		order: 0;
		flex: 1 1 0;
		min-width: 0;
		margin-top: 0;
		margin-right: 2px;
		padding-top: 2px;
		padding-bottom: 2px;
	}
}

/* Without the name, the one-row phone bar has to fit Services, Portfolio and
   Floor plans beside the button: no edge fade or bleed padding eating the
   room, tighter gaps, and the current section marked by weight, not by a
   bigger font that would push the last link out of sight. */
@media (max-width: 860px) {
	.pxs-nav.pxs-nav-nobrand .pxs-nav-strip { gap: 13px; margin-left: 0; margin-right: 0; padding-left: 2px; padding-right: 2px; -webkit-mask-image: none; mask-image: none; }
	.pxs-nav.pxs-nav-nobrand .pxs-nav-strip .pxs-nav-link.is-here { font-size: 13px; font-weight: 600; }
}
@media (max-width: 380px) {
	.pxs-nav.pxs-nav-float.pxs-nav-nobrand .pxs-nav-in { padding-left: 12px; }
	.pxs-nav.pxs-nav-nobrand .pxs-nav-strip { gap: 10px; }
	.pxs-nav.pxs-nav-nobrand .pxs-nav-strip .pxs-nav-link, .pxs-nav.pxs-nav-nobrand .pxs-nav-strip .pxs-nav-link.is-here { font-size: 12px; }
	.pxs.pxs-nav-nobrand .pxs-nav-cta-m { padding: 9px 12px !important; }
}

/* --- "I manage multiple listings", on the short quote form only -------------
 * The long wizard gives this a screen of its own, so it is hidden everywhere
 * except the two-step form, where there is no room for a screen and no reason
 * to spend one. Deliberately quiet: a tick under the cards, not a fourth card
 * competing with the three that carry the prices.
 *
 * Named -mlist, not -multi: .pxs-bk-multi is already a card-shaped checkbox
 * whose input is deliberately invisible, and inheriting half of that left this
 * one as a label with no box beside it. */
.pxs-bk-mlist { display: none; }
.pxs-booking-quote .pxs-bk-mlist {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 18px auto 0;
	padding: 10px 16px 10px 12px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 14px;
	color: var(--pxs-grey);
	background: rgba(0, 0, 0, .028);
	transition: background .2s ease, color .2s ease;
}
.pxs-booking-quote .pxs-bk-cards + .pxs-bk-mlist,
.pxs-booking-quote .pxs-bk-mlist { align-self: center; }
.pxs-booking-quote .pxs-bk-mlist:hover { background: rgba(0, 0, 0, .05); color: var(--pxs-ink); }
.pxs-booking-quote .pxs-bk-mlist input {
	appearance: none; -webkit-appearance: none;
	/* It has to carry .pxs-bk-in — that is the hook the wizard collects values
	   through — which is styled for text fields and pads this out to 32x28. */
	box-sizing: border-box;
	padding: 0;
	min-width: 0;
	width: 19px; height: 19px; margin: 0; flex: none;
	border: 1.5px solid rgba(0, 0, 0, .22);
	border-radius: 6px;
	background: #fff;
	display: grid; place-content: center;
	transition: background .18s ease, border-color .18s ease;
}
.pxs-booking-quote .pxs-bk-mlist input::after {
	content: '';
	width: 10px; height: 6px;
	border-left: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px) scale(.6);
	opacity: 0;
	transition: opacity .15s ease, transform .15s ease;
}
.pxs-booking-quote .pxs-bk-mlist input:checked {
	background: var(--pxs-accent);
	border-color: var(--pxs-accent);
}
.pxs-booking-quote .pxs-bk-mlist input:checked::after { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.pxs-booking-quote .pxs-bk-mlist input:focus-visible { outline: 2px solid var(--pxs-accent); outline-offset: 2px; }
.pxs-booking-quote .pxs-bk-mlist:has(input:checked) { color: var(--pxs-ink); }

/* The step centres its children, so the pill needs a row of its own to sit in. */
.pxs-booking-quote .pxs-bk-step { text-align: center; }
.pxs-booking-quote .pxs-bk-step > .pxs-bk-mlist { display: inline-flex; }

/* --- The short quote form now sits directly under the before/after ----------
 * Both were painting the same three layers, so the gradient restarted at the
 * join: the white hotspot at the top left landed immediately under the darkest
 * part of the section above and read as a bar drawn across the page. The same
 * mistake the comment above .pxs-ba-section warns about, made again by putting
 * two sections that share a background next to each other.
 *
 * This one picks up where the section above leaves off — starting at bg2 and
 * lightening downward, with no hotspot — so the two read as one continuous
 * surface, and it still looks different from the full wizard further down. */
.pxs.pxs-booking-quote {
	background:
		radial-gradient(900px 700px at 100% 8%, #f6ede9 0%, transparent 50%),
		linear-gradient(180deg, var(--pxs-bg2), var(--pxs-bg));
}

/* --- Close the strip between full-bleed sections ---------------------------
 * Avada gives every builder column a 20px bottom margin, and the page behind
 * it is #f8f8f8. Between two pale sections that never showed; between the
 * before/after, which ends on the darkest tone in the palette, and anything
 * below it, it reads as a pale bar ruled across the page.
 *
 * Our sections are full-bleed and carry 115-122px of their own padding, so the
 * 20px between the boxes was never doing any work. Removed wherever one of
 * ours is inside, which makes every join on the page continuous, not just the
 * one that happened to show it. */
.pxs-page .fusion-layout-column:has(> .fusion-column-wrapper > .pxs.pxs-fullbleed) {
	margin-bottom: 0 !important;
}

/* --- Two doors, not two shouts -------------------------------------------
 * Get a quote is what almost everyone wants first, so it keeps the filled
 * button. Book a shoot is for the minority who already know, and is drawn as
 * an outline: present, findable, and not competing for the same glance. */
.pxs .pxs-btn-ghost {
	background: transparent;
	color: var(--pxs-ink);
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .16);
}
.pxs .pxs-btn-ghost:hover {
	background: rgba(0, 0, 0, .04);
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .28);
}
.pxs-modal-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pxs-tier-btn2 { margin-top: 8px; }
@media (max-width: 640px) {
	.pxs-modal-cta { flex-direction: column; align-items: stretch; }
	.pxs-modal-cta .pxs-btn { justify-content: center; }
}

/* --- Photos per apartment on the bundle page -------------------------------
 * A compact version of the listing-page uploader, one per row. It sits on its
 * own line under the three fields so a row still reads as one apartment. */
.pxs-mu-up { grid-column: 1 / -1; margin-top: 8px; }
.pxs-mu-up .pxs-lp-drop.pxs-mu-drop {
	display: flex; align-items: center; gap: 9px;
	padding: 9px 13px; min-height: 0;
	border-radius: 10px; font-size: 13px;
	border: 1px dashed rgba(0, 0, 0, .18);
	background: rgba(0, 0, 0, .015);
	cursor: pointer;
}
.pxs-mu-up .pxs-lp-drop.pxs-mu-drop svg { width: 16px; height: 16px; flex: none; opacity: .55; }
.pxs-mu-up .pxs-lp-drop.pxs-mu-drop b { font-weight: 600; font-size: 13px; }
.pxs-mu-up .pxs-lp-drop.pxs-mu-drop span { color: var(--pxs-faint); font-size: 12px; }
.pxs-mu-up .pxs-lp-drop.pxs-mu-drop:hover { border-color: rgba(0, 0, 0, .3); background: rgba(0, 0, 0, .035); }
/* A row whose bucket has not arrived yet cannot accept a file: uploading into
   an inherited bucket would file it against the wrong apartment. */
.pxs-mu-up .pxs-lp-drop.is-waiting { opacity: .5; pointer-events: none; }
.pxs-mu-up .pxs-lp-thumbs { margin-top: 8px; }
.pxs-mu-known { display: inline-flex; align-items: center; gap: 6px; color: #3f6b45; }
.pxs-mu-known svg { width: 14px; height: 14px; }

/* ---------- Pasted headings in Avada Title elements ----------------------
   Text pasted straight into a Title element arrives as a bare <p> (it still
   carries the data-start/data-end attributes of wherever it was copied from).
   Avada styles its own .fusion-title-heading child, so the bare paragraph
   inherits the title's 44px size but the body's 26px line height. On one line
   nobody notices; the moment it wraps, the two lines sit on top of each other.
   Every project page on the site has this. Line height only: nothing else about
   the pasted text is touched. */
.fusion-title > p:not([class]),
.fusion-title > div > p:not([class]) { line-height: 1.12; }

/* ---------- Optional add-ons you can actually choose ---------------------
   These were a list with a price and a sentence asking you to email. A tick box
   and a live total say the same thing without the email, and make it obvious
   that taking none of them is a normal answer. */
.pxs-up-pick { position: relative; cursor: pointer; align-items: center; border-radius: 14px; padding: 12px; transition: background .18s ease, box-shadow .18s ease; }
.pxs-up-pick:hover { background: rgba(255,93,41,.05); }
.pxs .pxs-up-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pxs-up-box {
	flex: 0 0 auto; width: 24px; height: 24px; margin-right: 12px; border-radius: 8px;
	border: 1.5px solid rgba(0,0,0,.22); background: #fff; color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.pxs-up-box svg { width: 14px; height: 14px; opacity: 0; transition: opacity .16s ease; }
.pxs-up-pick.is-on .pxs-up-box { background: var(--pxs-accent); border-color: var(--pxs-accent); }
.pxs-up-pick.is-on .pxs-up-box svg { opacity: 1; }
.pxs-up-pick.is-on { background: rgba(255,93,41,.07); box-shadow: inset 0 0 0 1.5px rgba(255,93,41,.35); }
.pxs-up-hint { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; }
.pxs-up-hint-off { color: var(--pxs-accent); }
.pxs-up-hint-on { display: none; color: var(--pxs-ink3, #8a8a8a); font-weight: 500; }
.pxs-up-pick.is-on .pxs-up-hint-off { display: none; }
.pxs-up-pick.is-on .pxs-up-hint-on { display: block; }
.pxs-doc-addrow { color: var(--pxs-accent); }
.pxs-up-pick .pxs-doc-line-b { display: block; }
.pxs .pxs-up-pick:focus-within { outline: 2px solid rgba(255,93,41,.45); outline-offset: 2px; }
/* Tick box, thumbnail, text and price is four columns. On a phone that leaves
   the description a word wide, so the thumbnail steps out and the price moves
   under the title. */
/* The row is a label, so its parts are spans and default to running together.
   Tick, then a stacked block of title, description and hint, then the price. */
.pxs-up-pick { display: flex; align-items: flex-start; flex-wrap: nowrap; }
.pxs-up-pick .pxs-doc-line-t,
.pxs-up-pick .pxs-doc-line-d { display: block; }
.pxs-up-pick .pxs-doc-line-b { flex: 1 1 auto; min-width: 0; }
.pxs-up-pick .pxs-doc-upprice { flex: 0 0 auto; align-self: center; padding-left: 12px; }
.pxs-up-box { align-self: center; }

@media (max-width: 560px) {
	/* Four columns beside each other leaves the description a word wide. The
	   picture goes on top at full width and everything else reads underneath it,
	   which is the shape of a card rather than a squeezed table row. */
	.pxs .pxs-up-pick {
		display: grid; gap: 10px 10px; padding: 12px;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"img   img   img"
			"box   body  price";
		align-items: start;
	}
	.pxs .pxs-up-pick .pxs-doc-line-img { grid-area: img; margin: 0; width: 100%; max-width: none; flex: none; justify-self: stretch; }
	.pxs-up-pick .pxs-doc-line-img img {
		display: block; width: 100%; height: 150px;
		object-fit: cover; border-radius: 12px;
	}
	/* An add-on with no picture should not reserve a grey slab where one would
	   have been: the row simply starts at its title. */
	.pxs .pxs-up-pick .pxs-doc-line-img:has(.pxs-doc-noimg) { display: none; }
	.pxs .pxs-up-pick .pxs-doc-noimg { display: none; }
	.pxs-up-pick .pxs-doc-line-b { grid-area: body; min-width: 0; }
	.pxs-up-pick .pxs-doc-upprice { grid-area: price; align-self: start; padding-left: 0; font-size: 17px; }
	.pxs-up-pick .pxs-up-box { grid-area: box; align-self: start; margin: 2px 0 0; width: 26px; height: 26px; }
	.pxs-up-pick .pxs-doc-line-t { font-size: 16px; }
	.pxs-up-pick .pxs-doc-line-d { font-size: 13.5px; line-height: 1.55; }
}

/* ---------- Time slots: a grid, not a heap of pills ----------------------
   Ten half hours as wrapping pills is a wall of numbers of different widths.
   Equal cells in a grid, grouped by part of day, is how every booking tool
   people already use presents this, and it scans in one glance. */
.pxs .pxs-slotwrap { display: block; }
.pxs-slotday { display: flex; flex-direction: column; gap: 14px; }
.pxs-slotgrp-h {
	display: block; margin-bottom: 8px; font-family: var(--pxs-mono, monospace);
	font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--pxs-ink3, #8a8a8a);
}
.pxs-slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.pxs .pxs-slotgrid .pxs-cf-chip {
	padding: 13px 6px; border-radius: 12px; width: 100%;
	font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600;
	justify-content: center; text-align: center;
}
.pxs .pxs-slotgrid .pxs-cf-chip:hover { border-color: var(--pxs-accent); color: var(--pxs-accent); }
.pxs .pxs-slotgrid .pxs-cf-chip.is-sel {
	background: var(--pxs-accent); border-color: var(--pxs-accent); color: #fff;
	box-shadow: 0 6px 18px rgba(255,93,41,.28);
}
@media (max-width: 420px) {
	.pxs-slotgrid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 7px; }
	.pxs .pxs-slotgrid .pxs-cf-chip { padding: 12px 4px; font-size: 14px; }
}

/* ---------- The page once it is booked ---------------------------------- */
.pxs-bd { padding: clamp(24px, 4vw, 56px) clamp(10px, 3vw, 20px) clamp(36px, 6vw, 70px); background: var(--pxs-bg, #f1efec); }
.pxs-bd-card {
	max-width: 640px; margin: 0 auto; padding: clamp(22px, 5vw, 40px) clamp(18px, 5vw, 36px);
	background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 20px;
	box-shadow: 0 18px 50px rgba(0,0,0,.07); text-align: left;
}
/* On a phone the card was a column inside a column: 20px of page padding plus
   36px of card padding left the text in a gutter. Nearly the full width, with
   the facts stacked rather than squeezed into two columns that both wrap. */
@media (max-width: 560px) {
	/* The card sits inside the picker's own padding, so both have to give way or
	   the content ends up in a 300px gutter on a 390px phone. */
	.pxs.pxs-pick { padding-left: 10px; padding-right: 10px; }
	.pxs-bd { padding-left: 4px; padding-right: 4px; }
	.pxs-bd-card { padding: 22px 18px 24px; border-radius: 18px; }
	.pxs .pxs-bd-facts > div { display: block; padding: 12px 0; }
	.pxs .pxs-bd-facts dt { margin-bottom: 3px; font-size: 12.5px; letter-spacing: .02em; }
	.pxs .pxs-bd-facts dd { text-align: left; font-size: 15px; }
	.pxs .pxs-bd-btns .pxs-btn { flex: 1 1 100%; }
	.pxs .pxs-bd-when { font-size: 1.75rem; }
}
.pxs-bd-tick { display: block; width: 46px; height: 46px; margin-bottom: 16px; color: var(--pxs-accent); }
.pxs-bd-tick svg { width: 100%; height: 100%; }
.pxs-bd-when { margin: 6px 0 2px; font-size: clamp(1.55rem, 3.6vw, 2.2rem); line-height: 1.14; text-wrap: balance; }
.pxs-bd-time { margin: 0 0 12px; font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 700; color: var(--pxs-accent); font-variant-numeric: tabular-nums; }
/* The quote above is hidden once it is booked, so the page must not keep its space. */
.pxs-pick.is-done { padding-top: clamp(18px, 3vw, 30px); }
.pxs-bd-lead { margin: 0 0 20px; color: var(--pxs-ink2, #555); line-height: 1.65; }
.pxs-bd-facts { margin: 0 0 22px; padding: 0; border-top: 1px solid rgba(0,0,0,.08); }
.pxs-bd-facts > div { display: flex; gap: 16px; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.pxs-bd-facts dt { margin: 0; color: var(--pxs-ink3, #888); font-size: 13.5px; }
.pxs-bd-facts dd { margin: 0; text-align: right; font-weight: 600; font-size: 14px; color: var(--pxs-ink); }
.pxs-bd-btns { display: flex; flex-wrap: wrap; gap: 10px; }
/* The icon rides with the label and never shrinks when the button is narrow. */
.pxs .pxs-ico-dl { width: 17px; height: 17px; flex: 0 0 auto; }
.pxs-bd-btns .pxs-btn { justify-content: center; }
.pxs-bd-btns .pxs-btn { flex: 1 1 200px; text-align: center; }
.pxs-bd-guides { margin: 24px 0 4px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.08); }
.pxs-bd-guides b { display: block; font-size: 15px; color: var(--pxs-ink); }
.pxs-bd-guides p { margin: 4px 0 12px; font-size: 13.5px; color: var(--pxs-ink2, #555); }
.pxs-bd .pxs-prep { margin-top: 22px; }

/* ---------- Package page: the picker under the quote --------------------- */
.pxs-pick { background: var(--pxs-bg, #f1efec); padding: clamp(34px, 5vw, 64px) 20px clamp(40px, 6vw, 72px); }
.pxs-pick-wrap { max-width: 680px; margin: 0 auto; }
.pxs-pick-wrap .pxs-sec-head { margin-bottom: 18px; }
.pxs-pick-wrap .pxs-cf-form { display: flex; flex-direction: column; gap: 12px; }
.pxs-pick-foot { text-align: center; margin: 2px 0 0; }
.pxs-pick .pxs-cf-btn { width: 100%; }

/* The takeaway block: what to do before the shoot, and the two documents. */
.pxs-prep { margin-top: 6px; padding: 18px 20px 16px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; }
.pxs-prep-h { display: block; font-size: 15px; font-weight: 700; color: #111; }
.pxs-prep-lead { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: #555; }
.pxs-prep-list { margin: 12px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: #333; }
.pxs-prep-list li { margin: 2px 0; }
.pxs-prep-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 10px; }
.pxs-prep-btns .pxs-btn { flex: 1 1 190px; text-align: center; }

/* ---------- Client guide and booking confirmation (print pages) ---------- */
.pxs-doc-body { padding: 4px 0 2px; font-size: 14.5px; line-height: 1.68; color: #333; }
.pxs-doc-body h3 { margin: 22px 0 6px; font-size: 15px; font-weight: 700; color: #111; }
.pxs-doc-body p { margin: 0 0 10px; }
.pxs-doc-list { margin: 0 0 6px; padding-left: 18px; }
.pxs-doc-list li { margin: 4px 0; }
.pxs-doc-table { width: 100%; border-collapse: collapse; margin: 4px 0 14px; }
.pxs-doc-table th { width: 42%; padding: 9px 0; text-align: left; font-weight: 500; color: #666; border-bottom: 1px solid rgba(0,0,0,.08); }
.pxs-doc-table td { padding: 9px 0; text-align: right; color: #222; border-bottom: 1px solid rgba(0,0,0,.08); }

/* Saving the quote as a PDF must not print the booking form underneath it. */
@media print {
	.pxs-pick { display: none !important; }
}

/* =========================================================
   PRICING BY TYPE  ([pixel_pricetypes])
   Two picture questions, one price, one button. Everything else
   (what is included, the full table, examples) is folded or below.
   Scoped to .pxs.pxs-pt so Avada's button/paragraph rules cannot reach in.
   ========================================================= */
.pxs.pxs-pt { background: linear-gradient(180deg, #fbfaf9, #eeece9); }
.pxs.pxs-pt h2, .pxs.pxs-pt h3 { text-transform: none !important; }   /* Avada capitalises headings on some templates */
.pxs.pxs-pt .pxt-head { margin-bottom: clamp(22px, 3vw, 44px); }
.pxs.pxs-pt .pxt-lede { max-width: 520px; margin: 0 auto; }
.pxs.pxs-pt button { -webkit-appearance: none; appearance: none; margin: 0; font: inherit; text-transform: none; letter-spacing: normal; box-shadow: none; }
.pxs.pxs-pt .pxt-ic { width: 24px; height: 24px; flex: 0 0 auto; }
.pxs.pxs-pt .pxt-flash { animation: pxt-flash .45s var(--pxs-ease); }
@keyframes pxt-flash { from { opacity: .25; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.pxs.pxs-pt .pxt-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px clamp(28px, 4vw, 60px); max-width: 1120px; margin: 0 auto; text-align: left; align-items: start; }
/* A swipe strip inside a grid cell otherwise sizes the column to every photo in it. */
.pxs.pxs-pt .pxt-c > * { min-width: 0; }

/* the two questions */
.pxs.pxs-pt .pxt-q { display: flex; align-items: center; gap: 10px; font-family: var(--pxs-sans); font-weight: 600; font-size: 17px; line-height: 1.2; margin: 0 0 12px; color: var(--pxs-ink); }
.pxs.pxs-pt .pxt-q span { width: 24px; height: 24px; border-radius: 50%; background: var(--pxs-ink); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* 1: how are you listing, two icon cards; a sale then asks furnished or not */
.pxs.pxs-pt .pxt-chans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pxs.pxs-pt .pxt-chan { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left; background: rgba(255,255,255,.75); border: 1.5px solid rgba(0,0,0,.08); border-radius: 18px; cursor: pointer; color: var(--pxs-ink); transition: border-color .2s, background .2s, box-shadow .2s; }
.pxs.pxs-pt .pxt-chan:hover { border-color: rgba(0,0,0,.18); }
.pxs.pxs-pt .pxt-chan-ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; background: rgba(0,0,0,.05); color: var(--pxs-grey); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.pxs.pxs-pt .pxt-chan-ic .pxt-ic { width: 26px; height: 26px; }
.pxs.pxs-pt .pxt-chan-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pxs.pxs-pt .pxt-chan-t b { font-family: var(--pxs-sans); font-weight: 600; font-size: 16px; line-height: 1.2; }
.pxs.pxs-pt .pxt-chan-t small { font-size: 13px; line-height: 1.25; color: var(--pxs-grey); }
.pxs.pxs-pt .pxt-from { font-style: normal; font-family: var(--pxs-sans); font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--pxs-accent); margin-top: 3px; }
.pxs.pxs-pt .pxt-chan.is-on { border-color: var(--pxs-accent); background: #fff; box-shadow: 0 12px 30px -18px rgba(255,93,41,.6); }
.pxs.pxs-pt .pxt-chan.is-on .pxt-chan-ic { background: rgba(255,93,41,.1); color: var(--pxs-accent); }
.pxs.pxs-pt .pxt-tick { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--pxs-accent); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--pxs-ease); }
.pxs.pxs-pt .pxt-tick svg { width: 12px; height: 12px; }
.pxs.pxs-pt .pxt-chan.is-on .pxt-tick { opacity: 1; transform: none; }
.pxs.pxs-pt .pxt-furnish { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-top: 10px; background: rgba(0,0,0,.055); border-radius: 16px; animation: pxt-drop .3s var(--pxs-ease); }
.pxs.pxs-pt .pxt-furnish[hidden] { display: none; }
@keyframes pxt-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pxs.pxs-pt .pxt-fur { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--pxs-grey); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.pxs.pxs-pt .pxt-fur b { font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; }
.pxs.pxs-pt .pxt-fur:hover { color: var(--pxs-ink); }
.pxs.pxs-pt .pxt-fur.is-on { background: #fff; color: var(--pxs-ink); box-shadow: 0 2px 10px -3px rgba(0,0,0,.18); }
.pxs.pxs-pt .pxt-fur.is-on .pxt-ic { color: var(--pxs-accent); }
.pxs.pxs-pt .pxt-q2 { margin-top: 30px; }

/* 2: sizes, a little plan icon each */
.pxs.pxs-pt .pxt-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: rgba(0,0,0,.055); border-radius: 16px; }
.pxs.pxs-pt .pxt-size { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 66px; padding: 10px 6px; border: 0; border-radius: 12px; background: transparent; color: var(--pxs-grey); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.pxs.pxs-pt .pxt-size b { font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px; line-height: 1.15; }
.pxs.pxs-pt .pxt-size:hover { color: var(--pxs-ink); }
.pxs.pxs-pt .pxt-size.is-on { background: #fff; color: var(--pxs-ink); box-shadow: 0 2px 10px -3px rgba(0,0,0,.18); }
.pxs.pxs-pt .pxt-size.is-on .pxt-ic { color: var(--pxs-accent); }

/* the answer: one photo, one price, one button */
.pxs.pxs-pt .pxt-res { background: #fff; border-radius: var(--pxs-r); padding: 10px; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 40px 90px -55px rgba(0,0,0,.45); }
.pxs.pxs-pt .pxt-media { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #e4e2de; }
.pxs.pxs-pt .pxt-frame { position: absolute; inset: 0; display: block; }
.pxs.pxs-pt .pxt-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; transition: opacity .4s ease; }
.pxs.pxs-pt .pxt-frame img.pxt-in { opacity: 0; }
.pxs-js .pxs.pxs-pt .pxt-ex-img img { opacity: 0; transition: opacity .3s ease, transform .5s var(--pxs-ease); }
.pxs-js .pxs.pxs-pt .pxt-ex-img img.is-ld { opacity: 1; }
.pxs.pxs-pt .pxt-count { position: absolute; right: 10px; bottom: 10px; z-index: 2; font-family: var(--pxs-sans); font-weight: 600; font-size: 12.5px; color: #fff; background: rgba(13,13,13,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 6px 11px; border-radius: 100px; }
.pxs.pxs-pt .pxt-count:empty { display: none; }
.pxs.pxs-pt .pxt-res-body { padding: 18px 12px 6px; }
.pxs.pxs-pt .pxt-price b { display: block; font-family: var(--pxs-sans); font-weight: 700; font-size: clamp(2.8rem, 4vw, 3.4rem); letter-spacing: -.03em; line-height: 1; color: var(--pxs-ink); }
.pxs.pxs-pt p.pxt-sum { margin: 8px 0 18px; font-size: 14.5px; line-height: 1.4; color: var(--pxs-grey); }
/* a normal-size quote button with a clear second button beside it */
.pxs.pxs-pt .pxt-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pxs.pxs-pt .pxt-cta { padding: 13px 24px; font-size: 15px; }
.pxs.pxs-pt .pxt-inc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1.5px solid rgba(0,0,0,.14); border-radius: 100px; background: #fff; cursor: pointer; font-family: var(--pxs-sans); font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--pxs-ink); transition: border-color .2s; }
.pxs.pxs-pt .pxt-inc-btn:hover { border-color: rgba(0,0,0,.32); }
.pxs.pxs-pt .pxt-inc-btn svg { width: 15px; height: 15px; transition: transform .25s var(--pxs-ease); }
.pxs.pxs-pt .pxt-inc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.pxs.pxs-pt .pxt-inc { margin-top: 16px; padding-top: 4px; border-top: 1px solid rgba(0,0,0,.08); animation: pxt-drop .3s var(--pxs-ease); }
.pxs.pxs-pt .pxt-inc[hidden] { display: none; }
.pxs.pxs-pt .pxt-inc ul { list-style: none; margin: 0 0 12px; padding: 0; }
.pxs.pxs-pt .pxt-inc li { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; font-size: 14.5px; line-height: 1.4; color: var(--pxs-ink2); }
.pxs.pxs-pt .pxt-inc li b { color: var(--pxs-ink); }
.pxs.pxs-pt .pxt-chk { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 0; border-radius: 50%; background: rgba(255,93,41,.12); color: var(--pxs-accent); display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.pxs.pxs-pt .pxt-chk svg { width: 11px; height: 11px; }
.pxs.pxs-pt .pxt-inc p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--pxs-grey); }
.pxs.pxs-pt .pxt-inc p.pxt-note { color: var(--pxs-ink2); font-weight: 500; }
.pxs.pxs-pt .pxt-inc p:empty { display: none; }
.pxs.pxs-pt p.pxt-multi { text-align: center; margin: 14px auto 0; font-size: 13.5px; color: var(--pxs-grey); }
.pxs.pxs-pt p.pxt-multi a { color: var(--pxs-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* folded: what is included */
.pxs.pxs-pt .pxt-more { margin-top: 6px; }
.pxs.pxs-pt .pxt-more summary, .pxs.pxs-pt .pxt-compare summary { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; list-style: none; padding: 12px 4px; font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; color: var(--pxs-grey); }
.pxs.pxs-pt .pxt-more summary::-webkit-details-marker, .pxs.pxs-pt .pxt-compare summary::-webkit-details-marker { display: none; }
.pxs.pxs-pt .pxt-more summary::after, .pxs.pxs-pt .pxt-compare summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.pxs.pxs-pt .pxt-more[open] summary::after, .pxs.pxs-pt .pxt-compare[open] summary::after { transform: rotate(-135deg); }
.pxs.pxs-pt .pxt-more ul { list-style: none; margin: 2px 0 10px; padding: 0; }
.pxs.pxs-pt .pxt-more li { position: relative; padding: 8px 0 8px 26px; font-size: 14.5px; color: var(--pxs-ink2); border-top: 1px solid rgba(0,0,0,.07); }
.pxs.pxs-pt .pxt-more li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 12px; height: 7px; border-left: 2px solid var(--pxs-accent); border-bottom: 2px solid var(--pxs-accent); transform: rotate(-45deg); }
.pxs.pxs-pt .pxt-more p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--pxs-grey); }
.pxs.pxs-pt .pxt-more p.pxt-note { color: var(--pxs-ink2); font-weight: 500; }
.pxs.pxs-pt .pxt-more p:empty { display: none; }

/* below: real shoots like the one picked */
.pxs.pxs-pt .pxt-strip-wrap { grid-column: 1 / -1; }
.pxs.pxs-pt .pxt-strip-h { font-family: var(--pxs-sans); font-weight: 600; font-size: 15px; margin: 0 0 12px; color: var(--pxs-ink); }
.pxs.pxs-pt .pxt-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pxs.pxs-pt .pxt-ex-i { display: block; color: var(--pxs-ink); text-decoration: none; min-width: 0; }
.pxs.pxs-pt .pxt-ex-img { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #e4e2de; }
.pxs.pxs-pt .pxt-ex-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--pxs-ease); }
.pxs.pxs-pt a.pxt-ex-i:hover img { transform: scale(1.04); }
.pxs.pxs-pt .pxt-ex-t { display: block; margin-top: 7px; font-family: var(--pxs-sans); font-weight: 600; font-size: 13.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* folded: the whole table, for the curious */
.pxs.pxs-pt .pxt-compare { max-width: 760px; margin: clamp(26px, 3vw, 40px) auto 0; text-align: center; }
.pxs.pxs-pt .pxt-compare-scroll { overflow-x: auto; margin-top: 4px; }
.pxs.pxs-pt .pxt-compare table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; font-size: 14px; }
.pxs.pxs-pt .pxt-compare th, .pxs.pxs-pt .pxt-compare td { padding: 12px 10px; border-bottom: 1px solid rgba(0,0,0,.06); text-align: center; }
.pxs.pxs-pt .pxt-compare tbody th { text-align: left; font-weight: 600; }
.pxs.pxs-pt .pxt-compare thead th { font-family: var(--pxs-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--pxs-faint); font-weight: 500; }
.pxs.pxs-pt .pxt-compare td b { display: block; font-family: var(--pxs-sans); font-size: 17px; }
.pxs.pxs-pt .pxt-compare td small { color: var(--pxs-faint); font-size: 12px; }

/* trust, one quiet line */
.pxs.pxs-pt .pxt-trust { list-style: none; margin: 18px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 13px; color: var(--pxs-faint); }
.pxs.pxs-pt .pxt-trust li { display: inline-flex; align-items: center; gap: 7px; }
.pxs.pxs-pt .pxt-trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pxs-accent); }

@media (max-width: 1024px) {
	.pxs.pxs-pt .pxt-c { grid-template-columns: minmax(0, 1fr); max-width: 600px; gap: 0; }
	.pxs.pxs-pt .pxt-sizes { margin-bottom: 16px; }
	.pxs.pxs-pt .pxt-strip-wrap { margin-top: 26px; }
}

/* phones: this is where the visitors are, so it must fit and read at a glance */
@media (max-width: 760px) {
	.pxs.pxs-pt { padding: 52px 0 44px; }
	.pxs.pxs-pt .pxt-head { margin-bottom: 18px; }
	.pxs.pxs-pt .pxs-eyebrow { margin-bottom: 8px; }
	.pxs.pxs-pt .pxs-sec-head h2 { font-size: clamp(2rem, 8.6vw, 2.5rem); margin-bottom: 0; }
	.pxs.pxs-pt .pxt-q { font-size: 15px; margin-bottom: 9px; }
	.pxs.pxs-pt .pxt-q span { width: 22px; height: 22px; font-size: 11px; }
	.pxs.pxs-pt .pxt-chans { gap: 8px; }
	/* narrow cards: the orange border marks the choice, so no tick, and the
	   icon goes without its box so "ImmoScout & co." stays on one line */
	.pxs.pxs-pt .pxt-chan { gap: 8px; padding: 12px 10px; border-radius: 16px; align-items: flex-start; }
	.pxs.pxs-pt .pxt-chan-ic, .pxs.pxs-pt .pxt-chan.is-on .pxt-chan-ic { width: 22px; height: 22px; border-radius: 0; background: none; margin-top: 1px; }
	.pxs.pxs-pt .pxt-chan-ic .pxt-ic { width: 22px; height: 22px; }
	.pxs.pxs-pt .pxt-chan-t b { font-size: 14px; white-space: nowrap; }
	.pxs.pxs-pt .pxt-tick { display: none; }
	.pxs.pxs-pt .pxt-chan-t small { font-size: 12.5px; }
	.pxs.pxs-pt .pxt-from { font-size: 12.5px; }
	.pxs.pxs-pt .pxt-furnish { margin-top: 8px; }
	.pxs.pxs-pt .pxt-fur { min-height: 46px; }
	.pxs.pxs-pt .pxt-fur b { font-size: 13.5px; }
	.pxs.pxs-pt .pxt-q2 { margin-top: 18px; }
	.pxs.pxs-pt .pxt-size { min-height: 58px; padding: 8px 4px; gap: 5px; }
	.pxs.pxs-pt .pxt-size .pxt-ic { width: 22px; height: 22px; }
	.pxs.pxs-pt .pxt-size b { font-size: 12.5px; }
	.pxs.pxs-pt .pxt-res { padding: 8px; border-radius: 22px; }
	.pxs.pxs-pt .pxt-media { aspect-ratio: 16 / 9; border-radius: 15px; }
	.pxs.pxs-pt .pxt-res-body { padding: 12px 8px 2px; }
	.pxs.pxs-pt .pxt-price b { font-size: 2.6rem; }
	.pxs.pxs-pt p.pxt-sum { font-size: 13.5px; margin: 5px 0 12px; }
	.pxs.pxs-pt .pxt-acts { gap: 8px; flex-wrap: nowrap; }
	.pxs.pxs-pt .pxt-cta, .pxs.pxs-pt .pxt-inc-btn { flex: 1 1 0; justify-content: center; padding: 12px 10px; font-size: 14.5px; white-space: nowrap; }
	.pxs.pxs-pt .pxt-inc li { font-size: 14px; padding: 8px 0; }
	.pxs.pxs-pt p.pxt-multi { font-size: 12.5px; }
	.pxs.pxs-pt .pxt-strip-wrap { margin-top: 22px; }
	.pxs.pxs-pt .pxt-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
	.pxs.pxs-pt .pxt-strip::-webkit-scrollbar { display: none; }
	.pxs.pxs-pt .pxt-ex-i { flex: 0 0 44%; scroll-snap-align: start; }
	.pxs.pxs-pt .pxt-ex-t { font-size: 12.5px; }
	.pxs.pxs-pt .pxt-compare { margin-top: 14px; }
	.pxs.pxs-pt .pxt-compare td b { font-size: 15px; }
	.pxs.pxs-pt .pxt-compare th, .pxs.pxs-pt .pxt-compare td { padding: 10px 6px; }
	.pxs.pxs-pt .pxt-trust { margin-top: 10px; font-size: 12px; gap: 3px 14px; }
}

@media (max-width: 370px) {
	.pxs.pxs-pt .pxt-chan-t b { font-size: 13px; }
	.pxs.pxs-pt .pxt-chan { gap: 7px; padding: 12px 8px; }
}

/* the quote form says whose prices it shows after a hand-over from the pricing section */
.pxs .pxt-bk-listing { margin: -2px 0 12px; }
.pxs .pxt-bk-listing b { color: var(--pxs-accent); font-weight: 600; }
.pxs-anchor { display: block; height: 0; overflow: hidden; }

/* =========================================================
   QUOTE FORM, STEP ONE: how are you listing it?
   The pricing section's first question, inside the wizard.
   ========================================================= */
.pxs .pxt-bk-chans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 18px auto 0; }
.pxs .pxt-bk-chan { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left; background: #fff; border: 1.5px solid rgba(0,0,0,.1); border-radius: 18px; cursor: pointer; color: var(--pxs-ink); font: inherit; transition: border-color .2s, box-shadow .2s; }
.pxs .pxt-bk-chan:hover { border-color: rgba(0,0,0,.22); }
.pxs .pxt-bk-chan.is-sel { border-color: var(--pxs-accent); box-shadow: 0 12px 30px -18px rgba(255,93,41,.6); }
.pxs .pxt-bk-ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; background: rgba(0,0,0,.05); color: var(--pxs-grey); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.pxs .pxt-bk-ic svg { width: 24px; height: 24px; }
.pxs .pxt-bk-chan.is-sel .pxt-bk-ic { background: rgba(255,93,41,.1); color: var(--pxs-accent); }
.pxs .pxt-bk-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pxs .pxt-bk-t b { font-family: var(--pxs-sans); font-weight: 600; font-size: 16px; line-height: 1.2; }
.pxs .pxt-bk-t small { font-size: 13px; line-height: 1.25; color: var(--pxs-grey); }
.pxs .pxt-bk-t em { font-style: normal; font-family: var(--pxs-sans); font-weight: 600; font-size: 13px; color: var(--pxs-accent); margin-top: 3px; }
.pxs .pxt-bk-furnish { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; max-width: 560px; margin: 10px auto 0; background: rgba(0,0,0,.055); border-radius: 16px; animation: pxt-drop .3s var(--pxs-ease); }
.pxs .pxt-bk-furnish[hidden] { display: none; }
.pxs .pxt-bk-fur { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--pxs-grey); cursor: pointer; font: inherit; transition: background .2s, color .2s, box-shadow .2s; }
.pxs .pxt-bk-fur svg { width: 24px; height: 24px; flex: 0 0 auto; }
.pxs .pxt-bk-fur b { font-family: var(--pxs-sans); font-weight: 600; font-size: 14px; }
.pxs .pxt-bk-fur.is-on { background: #fff; color: var(--pxs-ink); box-shadow: 0 2px 10px -3px rgba(0,0,0,.18); }
.pxs .pxt-bk-fur.is-on svg { color: var(--pxs-accent); }
@media (max-width: 760px) {
	.pxs .pxt-bk-chans { gap: 8px; margin-top: 14px; }
	.pxs .pxt-bk-chan { gap: 8px; padding: 12px 10px; border-radius: 16px; align-items: flex-start; }
	.pxs .pxt-bk-ic, .pxs .pxt-bk-chan.is-sel .pxt-bk-ic { width: 22px; height: 22px; border-radius: 0; background: none; margin-top: 1px; }
	.pxs .pxt-bk-ic svg { width: 22px; height: 22px; }
	.pxs .pxt-bk-t b { font-size: 14px; white-space: nowrap; }
	.pxs .pxt-bk-t small, .pxs .pxt-bk-t em { font-size: 12.5px; }
	.pxs .pxt-bk-fur { min-height: 46px; }
	.pxs .pxt-bk-fur b { font-size: 13.5px; }
}
@media (max-width: 370px) {
	.pxs .pxt-bk-t b { font-size: 13px; }
	.pxs .pxt-bk-chan { gap: 7px; padding: 12px 8px; }
}

/* A sale's photo laid over a size card in the quote form / Book a shoot. */
.pxs .pxs-bk-card-img .pxt-bk-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }

/* Avada capitalises headings on some templates; the forms are sentence case ("Get a free quote."). */
.pxs.pxs-booking h2, .pxs.pxs-booking h3 { text-transform: none !important; }