/* ==========================================================================
   Specere PRO — premium page engine (Oct 19 2026)
   Built from the GHL Website Enhancement Kit (reference/ghl-website-enhancement-kit/):
   page loader, smooth cursor follower, scroll-activated header, smart slide-in menu,
   drifting text reveal, image-fill text mask, sentence change on scroll, advanced counters,
   layered image swap, section scroll-freeze horizontal scroll, stacked pin + 3D flip,
   pinned text sequence, slide & reveal cards, card background fill, 3D card flip,
   random slide-in gallery, B&W→colour tilt hover, floating cards, advanced FAQ,
   text underline swipe, side-fill / magnetic buttons, marquee, background gradient overlay.
   Everything is scoped under .px. Colours/fonts come from tokens set per site + per style.
   ========================================================================== */

/* --- GHL host reset: the page runs edge to edge inside one Custom Code element --- */
.c-section:has(.px), .c-row:has(.px), .c-column:has(.px) { padding: 0 !important; margin: 0 !important; }
.c-section:has(.px) .inner, .c-row:has(.px) .inner, .c-column:has(.px) .inner { max-width: none !important; width: 100% !important; padding: 0 !important; }

.px {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r: 22px;
  --max: 1280px;
  --gut: clamp(20px, 4vw, 56px);
  --c-bg: #f7f4ee; --c-surface: #ffffff; --c-ink: #14161a; --c-muted: #5d636c; --c-line: rgba(20,22,26,.12);
  --c-dark: #0d1117; --c-dark-ink: #f4f1ea; --c-dark-muted: rgba(244,241,234,.66);
  --c-accent: #1f9fd0; --c-accent-2: #bdeaf6; --c-on-accent: #ffffff;
  --f-display: 'Fraunces', Georgia, serif; --f-body: 'Inter', system-ui, sans-serif;
  --display-weight: 500; --display-track: -.02em; --display-case: none;
  background: var(--c-bg); color: var(--c-ink); font: 400 17px/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased; overflow-x: clip; position: relative;
}
.px *, .px *::before, .px *::after { box-sizing: border-box; }
:where(.px) img { display: block; max-width: 100%; }
:where(.px) a { color: inherit; text-decoration: none; }
:where(.px) h1, :where(.px) h2, :where(.px) h3, :where(.px) h4, :where(.px) p, :where(.px) figure, :where(.px) blockquote, :where(.px) ul { margin: 0; padding: 0; }
:where(.px) ul { list-style: none; }
.px-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.px-sec { padding: clamp(80px, 11vw, 160px) 0; position: relative; }
.px-dark { background: var(--c-dark); color: var(--c-dark-ink); }
.px-dark .px-muted, .px-dark .px-lead { color: var(--c-dark-muted); }
.px-muted { color: var(--c-muted); }
.px-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 12px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--c-accent); }
.px-eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.px-h1, .px-h2, .px-h3, .px-display { font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); text-transform: var(--display-case); line-height: 1.02; }
.px-h1 { font-size: clamp(46px, 8.4vw, 132px); }
.px-h2 { font-size: clamp(36px, 5.6vw, 84px); }
.px-h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }
.px-lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--c-muted); max-width: 620px; }
.px-em { font-style: italic; color: var(--c-accent); }
.px-head-row { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-bottom: clamp(40px, 6vw, 80px); }
.px-head-row .px-lead { max-width: 440px; }

/* --- Buttons (kit: Advanced Button Side Fill, 10 High-End Buttons, Magnetic Button) --- */
.px-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; border-radius: 999px; font: 600 15px/1 var(--f-body); letter-spacing: .02em; overflow: hidden; isolation: isolate; cursor: pointer; border: 0; transition: color .45s var(--ease), border-color .45s var(--ease); }
.px-btn svg { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.px-btn:hover svg { transform: translateX(4px) rotate(-45deg); }
.px-btn--solid { background: var(--c-accent); color: var(--c-on-accent); }
.px-btn--solid::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--c-accent) 62%, #000); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease); }
.px-btn--solid:hover::before { transform: scaleX(1); transform-origin: left; }
.px-btn--line { color: inherit; box-shadow: inset 0 0 0 1px currentColor; background: transparent; }
.px-btn--line::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: .12; transform: translateY(101%); transition: transform .5s var(--ease); }
.px-btn--line:hover::before { transform: none; }
.px-link { position: relative; display: inline-block; }
.px-link::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.px-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- Page loader (kit: 3 Cool Page Loading Animations, progress-bar variant) --- */
.px-loader { position: fixed; inset: 0; z-index: 9999; background: var(--c-dark); color: var(--c-dark-ink); display: grid; place-items: center; transition: opacity 1s var(--ease), visibility 1s; }
.px-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.px-loader-in { width: min(320px, 70vw); text-align: center; }
.px-loader-name { font: var(--display-weight) clamp(26px, 4vw, 40px)/1.1 var(--f-display); letter-spacing: var(--display-track); text-transform: var(--display-case); margin-bottom: 22px; }
.px-loader-bar { height: 2px; background: rgba(255,255,255,.15); border-radius: 2px; overflow: hidden; }
.px-loader-bar i { display: block; height: 100%; width: 0; background: var(--c-accent); transition: width .35s ease; }

/* --- Smooth cursor follower (kit) --- */
.px-cursor { position: fixed; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 9000; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease); display: none; }
.px-cursor.is-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
@media (hover: hover) and (pointer: fine) { .px-cursor { display: block; } }

/* --- Header: transparent → solid on scroll (kit: Scroll Activated Header) + hide on scroll down --- */
.px-header { position: fixed; top: 0; left: 0; right: 0; z-index: 800; color: #fff; transition: background .5s var(--ease), color .5s var(--ease), transform .45s var(--ease), box-shadow .5s; }
.px-header .px-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 88px; max-width: none; }
.px-header.is-solid { background: color-mix(in srgb, var(--c-bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--c-ink); box-shadow: 0 1px 0 var(--c-line); }
.px-header.is-hidden { transform: translateY(-100%); }
.px-logo { display: inline-flex; align-items: center; gap: 12px; }
.px-logo svg, .px-logo img { height: 46px; width: auto; }
.px-head-right { display: flex; align-items: center; gap: 22px; }
.px-head-phone { font: 600 15px/1 var(--f-body); letter-spacing: .02em; }
.px-menu-btn { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; color: inherit; font: 600 13px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; padding: 10px 0; }
.px-menu-btn i { position: relative; width: 26px; height: 10px; }
.px-menu-btn i::before, .px-menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.px-menu-btn i::before { top: 0; } .px-menu-btn i::after { bottom: 0; }
.px-menu-btn:hover i::before { transform: translateX(6px); } .px-menu-btn:hover i::after { transform: translateX(-6px); }
@media (max-width: 760px) { .px-head-phone, .px-header .px-btn { display: none; } .px-header .px-wrap { height: 72px; } .px-logo svg, .px-logo img { height: 38px; } }

/* --- Smart slide-in menu (kit: Smart Slide-In Mega Menu) --- */
.px-menu { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.px-menu-veil { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .6s var(--ease); }
.px-menu-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--c-dark); color: var(--c-dark-ink); padding: 110px clamp(28px, 5vw, 64px) 40px; transform: translateX(100%); transition: transform .8s var(--ease); display: flex; flex-direction: column; gap: 40px; overflow-y: auto; }
.px-menu.is-open { pointer-events: auto; }
.px-menu.is-open .px-menu-veil { opacity: 1; }
.px-menu.is-open .px-menu-panel { transform: none; }
.px-menu-close { position: absolute; top: 28px; right: 28px; background: none; border: 0; color: inherit; font: 600 13px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.px-menu-links a { display: flex; align-items: baseline; gap: 18px; padding: 10px 0; font: var(--display-weight) clamp(32px, 5vw, 54px)/1.05 var(--f-display); letter-spacing: var(--display-track); text-transform: var(--display-case); opacity: 0; transform: translateX(40px); transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s; }
.px-menu-links a small { font: 500 12px/1 var(--f-body); letter-spacing: .1em; color: var(--c-accent); }
.px-menu-links a:hover { color: var(--c-accent); }
.px-menu.is-open .px-menu-links a { opacity: 1; transform: none; }
.px-menu.is-open .px-menu-links a:nth-child(2) { transition-delay: .06s; } .px-menu.is-open .px-menu-links a:nth-child(3) { transition-delay: .12s; }
.px-menu.is-open .px-menu-links a:nth-child(4) { transition-delay: .18s; } .px-menu.is-open .px-menu-links a:nth-child(5) { transition-delay: .24s; } .px-menu.is-open .px-menu-links a:nth-child(6) { transition-delay: .3s; }
.px-menu-foot { margin-top: auto; display: grid; gap: 8px; color: var(--c-dark-muted); font-size: 15px; }
.px-menu-foot a { color: var(--c-dark-ink); }

/* --- Split headline chars (kit: Drifting Text Reveal) --- */
.px-split .px-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.px-split .px-c { display: inline-block; will-change: transform; }

/* --- HERO: cinema (full-bleed slideshow, Ken Burns, gradient overlay) --- */
.px-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--c-dark); }
.px-hero-media { position: absolute; inset: 0; }
.px-hero-media figure { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.px-hero-media figure.is-on { opacity: 1; }
.px-hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.px-hero-media figure.is-on img { animation: px-kenburns 9s linear forwards; }
@keyframes px-kenburns { from { transform: scale(1.18) translate3d(1.5%, 1%, 0); } to { transform: scale(1.02) translate3d(-1%, -1%, 0); } }
.px-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 32%, rgba(0,0,0,.25) 58%, rgba(0,0,0,.82) 100%); }
.px-hero-body { position: relative; z-index: 2; width: 100%; padding: 150px 0 clamp(48px, 7vw, 96px); }
.px-hero .px-eyebrow { color: #fff; opacity: .9; }
.px-hero .px-h1 { margin: 26px 0 28px; max-width: 13ch; }
.px-hero-foot { display: flex; justify-content: space-between; align-items: end; gap: 36px; flex-wrap: wrap; }
.px-hero-foot .px-lead { color: rgba(255,255,255,.82); max-width: 520px; }
.px-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.px-hero-count { display: flex; gap: 10px; align-items: center; font: 500 13px/1 var(--f-body); letter-spacing: .14em; }
.px-hero-count i { width: 54px; height: 2px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.px-hero-count i b { position: absolute; inset: 0; background: #fff; transform-origin: left; animation: px-progress 6s linear infinite; }
@keyframes px-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.px-trustline { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.22); font-size: 14px; color: rgba(255,255,255,.85); }
.px-trustline b { color: #fff; }
.px-scrollcue { position: absolute; right: var(--gut); bottom: 40px; z-index: 2; writing-mode: vertical-rl; font: 600 11px/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; display: flex; gap: 14px; align-items: center; }
.px-scrollcue::after { content: ""; width: 1px; height: 64px; background: linear-gradient(#fff, transparent); animation: px-cue 2.2s var(--ease) infinite; }
@keyframes px-cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 760px) { .px-scrollcue { display: none; } }

/* --- HERO: mask (image-filled giant type on solid colour, kit: Image-Fill Text Mask) --- */
.px-hero--mask { background: var(--c-bg); color: var(--c-ink); align-items: center; }
.px-hero--mask::after { display: none; }
.px-hero--mask .px-eyebrow { color: var(--c-accent); }
.px-masktext { display: block; font: var(--display-weight) clamp(64px, 15vw, 250px)/.88 var(--f-display); letter-spacing: -.04em; text-transform: var(--display-case);
  background-image: var(--px-fill); background-size: cover; background-position: 50% 50%; color: transparent; -webkit-background-clip: text; background-clip: text; animation: px-maskpan 18s ease-in-out infinite alternate; }
@keyframes px-maskpan { from { background-position: 30% 40%; } to { background-position: 70% 60%; } }
.px-hero--mask .px-lead { color: var(--c-muted); }
.px-mask-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(30px, 5vw, 70px); align-items: end; margin-top: 30px; }
.px-mask-photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); }
.px-mask-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .px-mask-grid { grid-template-columns: 1fr; } .px-mask-photo { aspect-ratio: 4/3; } }

/* --- HERO: editorial split with layered image swap (kit: Layered Image Swap on Scroll) --- */
.px-hero--split { background: var(--c-bg); color: var(--c-ink); align-items: center; }
.px-hero--split::after { display: none; }
.px-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.px-hero--split .px-h1 { color: var(--c-ink); }
.px-hero--split .px-trustline { border-color: var(--c-line); color: var(--c-muted); }
.px-hero--split .px-trustline b { color: var(--c-ink); }
@media (max-width: 900px) { .px-split-grid { grid-template-columns: 1fr; } }
.px-stack { position: relative; aspect-ratio: 4/5; max-width: 560px; margin-left: auto; width: 100%; }
.px-stack img { position: absolute; width: 82%; height: 82%; object-fit: cover; border-radius: var(--r); box-shadow: 0 30px 60px -25px rgba(0,0,0,.45); transition: none; }
.px-stack .px-stack-a { top: 0; right: 0; z-index: 2; }
.px-stack .px-stack-b { bottom: 0; left: 0; z-index: 1; opacity: .85; }
.px-stack-tag { position: absolute; z-index: 3; left: -10px; top: 18%; background: var(--c-surface); color: var(--c-ink); padding: 16px 20px; border-radius: 16px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.4); font-size: 14px; max-width: 230px; }
.px-stack-tag b { display: block; font: var(--display-weight) 30px/1 var(--f-display); color: var(--c-accent); margin-bottom: 4px; }

/* --- Marquee band (kit: Horizontal Text Scrolling + pause on hover) --- */
.px-band { padding: 26px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); overflow: hidden; }
.px-dark .px-band, .px-band.px-dark { border-color: rgba(255,255,255,.12); }
.px-band-track { display: flex; width: max-content; animation: px-marquee 38s linear infinite; }
.px-band:hover .px-band-track { animation-play-state: paused; }
.px-band-track span { display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; font: var(--display-weight) clamp(28px, 4vw, 54px)/1 var(--f-display); letter-spacing: var(--display-track); text-transform: var(--display-case); white-space: nowrap; }
.px-band-track span::after { content: "✦"; font-size: .45em; color: var(--c-accent); }
.px-band-track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px currentColor; }
.px-band .px-band-track span:nth-child(even) { -webkit-text-stroke-color: var(--c-ink); }
.px-dark.px-band .px-band-track span:nth-child(even) { -webkit-text-stroke-color: var(--c-dark-ink); }
@keyframes px-marquee { to { transform: translateX(-50%); } }

/* --- Statement: words light up as you scroll (kit: Sentence Effect Change on Scroll) --- */
.px-statement p { font: var(--display-weight) clamp(30px, 4.6vw, 68px)/1.15 var(--f-display); letter-spacing: var(--display-track); max-width: 22ch; }
.px-statement .px-word { opacity: .16; transition: opacity .25s linear; }
.px-statement .px-word.is-lit { opacity: 1; }
.px-statement .px-word.px-accent { color: var(--c-accent); font-style: italic; }
.px-statement-foot { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 50px; align-items: center; }

/* --- Counters (kit: Advanced Counter Effect) --- */
.px-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--c-line); }
.px-dark .px-stats { border-color: rgba(255,255,255,.14); }
.px-stat { padding: 36px 24px 10px 0; border-right: 1px solid var(--c-line); }
.px-dark .px-stat { border-color: rgba(255,255,255,.14); }
.px-stat:last-child { border-right: 0; }
.px-stat strong { display: block; font: var(--display-weight) clamp(44px, 5.4vw, 84px)/1 var(--f-display); letter-spacing: -.03em; }
.px-stat strong sup { font-size: .45em; vertical-align: top; color: var(--c-accent); margin-left: 4px; }
.px-stat > span { display: block; margin-top: 12px; font-size: 14px; color: var(--c-muted); max-width: 210px; }
.px-dark .px-stat > span { color: var(--c-dark-muted); }
@media (max-width: 900px) { .px-stats { grid-template-columns: 1fr 1fr; } .px-stat:nth-child(2) { border-right: 0; } .px-stat { padding-left: 0; } }

/* --- Story --- */
.px-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.px-story .px-h2 { margin: 22px 0 28px; }
.px-story p + p { margin-top: 18px; }
.px-story-copy p { color: var(--c-muted); }
.px-dark .px-story-copy p { color: var(--c-dark-muted); }
.px-sign { margin-top: 34px; display: flex; gap: 16px; align-items: center; font-size: 14px; }
.px-sign b { font: italic var(--display-weight) 26px/1 var(--f-display); color: var(--c-accent); }
@media (max-width: 900px) { .px-story { grid-template-columns: 1fr; } }

/* --- Showcase: pinned horizontal scroll (kit: Section Scroll Freeze + Horizontal Scrolling) --- */
.px-show { position: relative; overflow: hidden; }
.px-show-track { display: flex; gap: 28px; padding: 0 var(--gut); width: max-content; align-items: center; }
.px-show-intro { width: min(460px, 82vw); flex: none; }
.px-show-intro .px-h2 { margin: 22px 0 24px; }
.px-show-item { position: relative; flex: none; width: min(62vw, 820px); height: min(70vh, 620px); border-radius: var(--r); overflow: hidden; }
.px-show-item:nth-child(odd) { height: min(58vh, 520px); width: min(46vw, 620px); }
.px-show-item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.px-show-item figcaption { position: absolute; left: 24px; bottom: 22px; right: 24px; display: flex; justify-content: space-between; gap: 16px; align-items: end; color: #fff; font-size: 15px; z-index: 2; }
.px-show-item figcaption b { font: var(--display-weight) 15px/1 var(--f-body); letter-spacing: .14em; opacity: .7; }
.px-show-item::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.px-show-pad { padding: clamp(80px, 10vw, 140px) 0; }
@media (max-width: 899px) {
  .px-show-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .px-show-item, .px-show-item:nth-child(odd) { width: 82vw; height: 60vh; scroll-snap-align: center; }
  .px-show-intro { width: 82vw; }
}

/* --- Services: slide & reveal cards (kit: Advanced Slide & Reveal Card) --- */
.px-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.px-cards.px-cards-2 { grid-template-columns: repeat(2, 1fr); }
.px-reveal { position: relative; height: 460px; border-radius: var(--r); overflow: hidden; color: #fff; isolation: isolate; }
.px-reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); z-index: -2; }
.px-reveal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.78)); transition: background .6s var(--ease); }
.px-reveal:hover img { transform: scale(1.07); }
.px-reveal-num { position: absolute; top: 22px; left: 24px; font: 600 12px/1 var(--f-body); letter-spacing: .2em; }
.px-reveal-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; }
.px-reveal-body h3 { font: var(--display-weight) clamp(24px, 2.2vw, 32px)/1.1 var(--f-display); letter-spacing: var(--display-track); text-transform: var(--display-case); }
.px-reveal-body p { max-height: 0; opacity: 0; overflow: hidden; color: rgba(255,255,255,.85); font-size: 15px; transition: max-height .7s var(--ease), opacity .5s var(--ease), margin .7s var(--ease); }
.px-reveal:hover .px-reveal-body p, .px-reveal:focus-within .px-reveal-body p { max-height: 160px; opacity: 1; margin-top: 12px; }
.px-reveal:hover::before { background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.85)); }
@media (hover: none) { .px-reveal-body p { max-height: 160px; opacity: 1; margin-top: 12px; } }
@media (max-width: 1000px) { .px-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .px-cards, .px-cards.px-cards-2 { grid-template-columns: 1fr; } .px-reveal { height: 400px; } }

/* --- Services: card background fill (kit: Card Background Fill) --- */
.px-fill { position: relative; overflow: hidden; padding: 40px 34px 36px; border-radius: var(--r); background: var(--c-surface); border: 1px solid var(--c-line); min-height: 300px; display: flex; flex-direction: column; isolation: isolate; transition: color .55s var(--ease); }
.px-dark .px-fill { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.px-fill::before { content: ""; position: absolute; top: -70px; right: -70px; width: 140px; height: 140px; border-radius: 50%; background: var(--c-accent); z-index: -1; transition: transform .8s var(--ease); }
.px-fill:hover::before { transform: scale(9); }
.px-fill:hover { color: var(--c-on-accent); }
.px-fill:hover p { color: inherit; opacity: .9; }
.px-fill-num { font: 600 12px/1 var(--f-body); letter-spacing: .2em; color: var(--c-on-accent); position: absolute; top: 22px; right: 24px; }
.px-fill h3 { font: var(--display-weight) clamp(24px, 2.2vw, 30px)/1.1 var(--f-display); letter-spacing: var(--display-track); text-transform: var(--display-case); margin: auto 0 14px; padding-top: 70px; }
.px-fill p { color: var(--c-muted); font-size: 15px; }
.px-dark .px-fill p { color: var(--c-dark-muted); }
.px-fill-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; font-size: 22px; opacity: .8; }

/* --- Services: 3D card flip (kit: 3D Card Flip) --- */
.px-flip { perspective: 1400px; height: 420px; }
.px-flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.px-flip:hover .px-flip-in, .px-flip:focus-within .px-flip-in { transform: rotateY(180deg); }
.px-flip-face { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.px-flip-front img { width: 100%; height: 100%; object-fit: cover; }
.px-flip-front h3 { position: absolute; left: 24px; right: 24px; bottom: 22px; color: #fff; font: var(--display-weight) 28px/1.1 var(--f-display); letter-spacing: var(--display-track); text-transform: var(--display-case); z-index: 2; }
.px-flip-front::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.px-flip-back { transform: rotateY(180deg); background: var(--c-accent); color: var(--c-on-accent); padding: 34px; display: flex; flex-direction: column; justify-content: flex-end; }
.px-flip-back h3 { font: var(--display-weight) 30px/1.1 var(--f-display); letter-spacing: var(--display-track); text-transform: var(--display-case); margin-bottom: 14px; }
@media (hover: none) { .px-flip-back { transform: none; position: relative; height: auto; margin-top: 12px; } .px-flip { height: auto; } .px-flip-in { transform: none !important; } .px-flip-front { position: relative; height: 320px; } }

/* --- Process: stacked pin + 3D flip (kit) --- */
.px-steps-intro { padding-bottom: 40px; }
.px-step { min-height: 100vh; display: flex; align-items: center; position: relative; }
.px-steps { perspective: 1200px; }
.px-step-card { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); transform-style: preserve-3d; }
.px-step-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center; background: var(--c-surface); color: var(--c-ink); border-radius: calc(var(--r) * 1.4); padding: clamp(28px, 4vw, 56px); box-shadow: 0 50px 100px -40px rgba(0,0,0,.45); }
.px-dark .px-step-in { background: #161b22; color: var(--c-dark-ink); }
.px-step-num { font: var(--display-weight) clamp(90px, 12vw, 180px)/.8 var(--f-display); color: var(--c-accent); letter-spacing: -.05em; }
.px-step-in h3 { font: var(--display-weight) clamp(30px, 3.4vw, 52px)/1.05 var(--f-display); letter-spacing: var(--display-track); text-transform: var(--display-case); margin: 18px 0 16px; }
.px-step-in p { color: var(--c-muted); }
.px-dark .px-step-in p { color: var(--c-dark-muted); }
.px-step-img { border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; }
.px-step-img img { width: 100%; height: 100%; object-fit: cover; }
.px-step-list { margin-top: 18px; display: grid; gap: 8px; font-size: 15px; }
.px-step-list li::before { content: "→ "; color: var(--c-accent); }
@media (max-width: 899px) { .px-step { min-height: 0; padding: 12px 0; } .px-step-in { grid-template-columns: 1fr; } }

/* --- Process: pinned text sequence (kit: Pinned Text Sequence) --- */
.px-seq { position: relative; }
.px-seq-stage { height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; }
.px-seq-item { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 var(--gut); }
.px-seq-item > div { max-width: 900px; }
.px-seq-item .px-step-num { display: block; margin-bottom: 10px; }
.px-seq-item h3 { font: var(--display-weight) clamp(38px, 5.6vw, 88px)/1.02 var(--f-display); letter-spacing: var(--display-track); text-transform: var(--display-case); }
.px-seq-item p { margin: 20px auto 0; max-width: 560px; color: var(--c-dark-muted); font-size: 18px; }
.px-seq-bg { position: absolute; inset: 0; opacity: .22; }
.px-seq-bg img { width: 100%; height: 100%; object-fit: cover; }
.px-seq-dots { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.px-seq-dots i { width: 34px; height: 2px; background: rgba(255,255,255,.25); }
.px-seq-dots i.is-on { background: var(--c-accent); }
@media (max-width: 899px) { .px-seq-stage { height: auto; display: block; padding: 70px 0; } .px-seq-item { position: relative; inset: auto; padding: 40px var(--gut); } .px-seq-dots, .px-seq-bg { display: none; } }

/* --- Gallery: random slide-in + B&W→colour + tilt (kit) --- */
.px-gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 120px; gap: 16px; }
.px-gallery figure { position: relative; border-radius: var(--r); overflow: hidden; grid-column: span 4; grid-row: span 3; }
.px-gallery figure:nth-child(6n+1) { grid-column: span 7; grid-row: span 4; }
.px-gallery figure:nth-child(6n+2) { grid-column: span 5; grid-row: span 4; }
.px-gallery figure:nth-child(6n+6) { grid-column: span 4; grid-row: span 3; }
.px-gallery img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) contrast(1.05); transition: filter .8s var(--ease), transform 1s var(--ease); }
.px-gallery figure:hover img { filter: none; transform: scale(1.06); }
.px-gallery figcaption { position: absolute; left: 16px; bottom: 14px; color: #fff; font-size: 13px; letter-spacing: .04em; z-index: 2; opacity: 0; transform: translateY(8px); transition: all .5s var(--ease); }
.px-gallery figure::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); opacity: 0; transition: opacity .5s; }
.px-gallery figure:hover figcaption, .px-gallery figure:hover::after { opacity: 1; transform: none; }
@media (hover: none) { .px-gallery img { filter: none; } .px-gallery figcaption, .px-gallery figure::after { opacity: 1; transform: none; } }
@media (max-width: 760px) { .px-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } .px-gallery figure, .px-gallery figure:nth-child(n) { grid-column: span 1; grid-row: span 1; } .px-gallery figure:nth-child(3n+1) { grid-column: span 2; grid-row: span 2; } }

/* --- Reviews: floating cards (kit: Floating Cards) --- */
.px-reviews { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.px-rating { font: var(--display-weight) clamp(90px, 11vw, 170px)/.9 var(--f-display); letter-spacing: -.05em; }
.px-rating small { font-size: .3em; color: var(--c-accent); letter-spacing: 0; }
.px-stars { color: var(--c-accent); letter-spacing: .18em; font-size: 18px; }
.px-float-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.px-quote-card { background: var(--c-surface); color: var(--c-ink); border-radius: var(--r); padding: 30px; box-shadow: 0 30px 60px -35px rgba(0,0,0,.35); border: 1px solid var(--c-line); will-change: transform; }
.px-dark .px-quote-card { background: rgba(255,255,255,.05); color: var(--c-dark-ink); border-color: rgba(255,255,255,.1); box-shadow: none; }
.px-quote-card:nth-child(even) { margin-top: 40px; }
.px-quote-card p { font-size: 16px; line-height: 1.6; margin: 14px 0 18px; }
.px-quote-card cite { font: 600 13px/1.3 var(--f-body); font-style: normal; letter-spacing: .04em; color: var(--c-muted); }
.px-dark .px-quote-card cite { color: var(--c-dark-muted); }
@media (max-width: 900px) { .px-reviews, .px-float-wrap { grid-template-columns: 1fr; } .px-quote-card:nth-child(even) { margin-top: 0; } }

/* --- Reviews marquee (alternative) --- */
.px-qmarq { overflow: hidden; margin-top: 50px; }
.px-qmarq-track { display: flex; gap: 20px; width: max-content; animation: px-marquee 60s linear infinite; }
.px-qmarq:hover .px-qmarq-track { animation-play-state: paused; }
.px-qmarq .px-quote-card { width: min(420px, 80vw); flex: none; margin: 0 !important; }

/* --- FAQ with image (kit: Advanced FAQ Section) --- */
.px-faq { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.px-faq-img { position: sticky; top: 110px; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/5; }
.px-faq-img img { width: 100%; height: 100%; object-fit: cover; }
.px-faq details { border-bottom: 1px solid var(--c-line); }
.px-dark .px-faq details { border-color: rgba(255,255,255,.14); }
.px-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 26px 0; font: var(--display-weight) clamp(20px, 1.9vw, 26px)/1.25 var(--f-display); letter-spacing: var(--display-track); }
.px-faq summary::-webkit-details-marker { display: none; }
.px-faq summary::after { content: "+"; font: 300 30px/1 var(--f-body); color: var(--c-accent); transition: transform .45s var(--ease); }
.px-faq details[open] summary::after { transform: rotate(45deg); }
.px-faq-a { overflow: hidden; }
.px-faq-a p { padding: 0 0 26px; color: var(--c-muted); max-width: 560px; }
.px-dark .px-faq-a p { color: var(--c-dark-muted); }
@media (max-width: 900px) { .px-faq { grid-template-columns: 1fr; } .px-faq-img { position: relative; top: 0; aspect-ratio: 16/9; } }

/* --- Big CTA with image-filled type (kit: Image-Fill Text Mask) --- */
.px-cta { text-align: center; overflow: hidden; }
.px-cta .px-masktext { font-size: clamp(64px, 16vw, 260px); }
.px-cta-sub { margin: 26px auto 40px; max-width: 560px; color: var(--c-muted); font-size: 19px; }
.px-dark .px-cta-sub { color: var(--c-dark-muted); }
.px-cta .px-hero-ctas { justify-content: center; }

/* --- Quote form on photo with gradient overlay (kit: Background Gradient Overlay) --- */
.px-quote { position: relative; overflow: hidden; color: #fff; }
.px-quote-bg { position: absolute; inset: -10% 0; }
.px-quote-bg img { width: 100%; height: 100%; object-fit: cover; }
.px-quote::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(110deg, rgba(0,0,0,.86) 20%, color-mix(in srgb, var(--c-accent) 35%, rgba(0,0,0,.55)) 100%); }
.px-quote .px-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.px-quote .px-lead { color: rgba(255,255,255,.8); }
.px-contact { margin-top: 36px; display: grid; gap: 18px; }
.px-contact a, .px-contact div { display: flex; gap: 16px; align-items: center; font-size: 17px; }
.px-contact span { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; flex: none; }
.px-contact small { display: block; font-size: 13px; color: rgba(255,255,255,.65); }
.px-form { background: rgba(255,255,255,.97); color: var(--c-ink); border-radius: calc(var(--r) * 1.2); padding: clamp(26px, 3.4vw, 44px); box-shadow: 0 50px 100px -40px rgba(0,0,0,.6); }
.px-form h3 { font: var(--display-weight) 32px/1.1 var(--f-display); letter-spacing: var(--display-track); text-transform: var(--display-case); }
.px-form > p { color: var(--c-muted); margin: 8px 0 22px; font-size: 15px; }
.px-form .px-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.px-form label { display: grid; gap: 6px; font: 600 12px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.px-form .px-full { grid-column: 1 / -1; }
.px-form input, .px-form select, .px-form textarea { width: 100%; font: 400 16px/1.4 var(--f-body); color: var(--c-ink); background: #f3f4f6; border: 1px solid transparent; border-radius: 12px; padding: 14px 16px; text-transform: none; letter-spacing: 0; transition: border-color .3s, background .3s; }
.px-form input:focus, .px-form select:focus, .px-form textarea:focus { outline: none; border-color: var(--c-accent); background: #fff; }
.px-form .px-btn { width: 100%; justify-content: center; margin-top: 18px; }
.px-form .px-note { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--c-muted); }
@media (max-width: 900px) { .px-quote .px-wrap { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .px-form .px-grid { grid-template-columns: 1fr; } }

/* --- Footer with giant wordmark --- */
.px-footer { background: var(--c-dark); color: var(--c-dark-ink); padding: 90px 0 30px; overflow: hidden; }
.px-foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.12); }
.px-foot-cols h4 { font: 600 12px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 18px; }
.px-foot-cols li { margin: 8px 0; color: var(--c-dark-muted); font-size: 15px; }
.px-foot-cols p { color: var(--c-dark-muted); font-size: 15px; max-width: 320px; margin-top: 18px; }
.px-wordmark { font: var(--display-weight) clamp(56px, 13vw, 220px)/.9 var(--f-display); letter-spacing: -.04em; text-transform: var(--display-case); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.22); white-space: nowrap; padding: 50px 0 20px; }
.px-legal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--c-dark-muted); }
@media (max-width: 900px) { .px-foot-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .px-foot-cols { grid-template-columns: 1fr; } .px-wordmark { white-space: normal; } }

/* --- Concept ribbon (prospect demos only) --- */
.px-concept { position: fixed; z-index: 950; left: 18px; bottom: 18px; max-width: 260px; padding: 10px 14px; border-radius: 12px; background: rgba(13,17,23,.88); color: #fff; font: 500 12px/1.4 var(--f-body); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.px-concept b { color: var(--c-accent); }

/* --- Utility: parallax image frame --- */
.px-frame { border-radius: var(--r); overflow: hidden; position: relative; }
.px-frame img { width: 100%; height: 118%; object-fit: cover; }
.px-tilt { transition: transform .6s var(--ease); transform-style: preserve-3d; }

@media (prefers-reduced-motion: reduce) {
  .px *, .px *::before, .px *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* --- Hero video (free Pixabay stock, mood only) --- */
.px-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-hero-media .px-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-hero--center { align-items: center; text-align: center; }
.px-hero--center .px-h1 { margin-left: auto; margin-right: auto; max-width: 16ch; }
.px-hero--center .px-hero-foot { justify-content: center; text-align: center; }
.px-hero--center .px-lead { margin: 0 auto; }
.px-hero--center .px-hero-ctas, .px-hero--center .px-trustline { justify-content: center; }
.px-hero--center .px-eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.px-hero--left .px-h1 { max-width: 14ch; }
.px-hero-badge { position: absolute; z-index: 3; right: var(--gut); top: 50%; transform: translateY(-50%); width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #fff; }
.px-hero-badge svg { position: absolute; inset: 0; animation: px-spin 22s linear infinite; }
.px-hero-badge b { font: var(--display-weight) 30px/1 var(--f-display); display: block; }
.px-hero-badge small { font: 600 10px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
@keyframes px-spin { to { transform: rotate(360deg); } }
@media (max-width: 1000px) { .px-hero-badge { display: none; } }
.px-seq-bg:first-of-type { opacity: .22; }
.px-header .px-logo { color: inherit; }
.px-logo-word { display: flex; flex-direction: column; line-height: 1; }
.px-logo-word b { font: var(--display-weight) 22px/1 var(--f-display); letter-spacing: var(--display-track); white-space: nowrap; }
.px-logo-word small { font: 600 9.5px/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; opacity: .75; margin-top: 6px; white-space: nowrap; }
.px-logo .px-mark { width: 44px; height: 44px; flex: none; }
@media (max-width: 760px) { .px-logo .px-mark { width: 36px; height: 36px; } .px-logo-word b { font-size: 18px; } .px-logo-word small { font-size: 8.5px; letter-spacing: .18em; } }
.px-form .px-thanks h3 { margin-bottom: 8px; }
.px-sec-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 80px); }
.px-sec-head .px-h2 { margin: 20px 0 22px; }
.px-center { text-align: center; margin-left: auto; margin-right: auto; }
.px-center .px-lead { margin: 0 auto; }
.px-alt { background: var(--c-surface); }
.px-tint { background: color-mix(in srgb, var(--c-accent) 9%, var(--c-bg)); }
.px-story-img { position: relative; }
.px-story-img .px-frame { aspect-ratio: 4/5; }
.px-story-img figcaption { margin-top: 14px; font-size: 13px; color: var(--c-muted); }
.px-dark .px-story-img figcaption { color: var(--c-dark-muted); }
.px-story-img .px-stamp { position: absolute; right: -18px; bottom: 40px; background: var(--c-accent); color: var(--c-on-accent); border-radius: 18px; padding: 20px 22px; max-width: 220px; font-size: 14px; line-height: 1.35; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.px-story-img .px-stamp b { display: block; font: var(--display-weight) 34px/1 var(--f-display); margin-bottom: 6px; }
@media (max-width: 900px) { .px-story-img .px-stamp { right: 12px; bottom: 50px; } }
.px-areas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.px-areas span { padding: 9px 16px; border-radius: 999px; border: 1px solid currentColor; font-size: 13px; opacity: .8; }
.px-cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .px-cards-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .px-cards-4 { grid-template-columns: 1fr; } }
.px-min0 { min-width: 0; overflow-wrap: anywhere; }
.px-hero--left::after { background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 75%), linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.8) 100%); }
.px-hero--center::after { background: radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.55) 100%), linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.7) 100%); }
.px-hero .px-lead { text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.px-hero .px-h1 { text-shadow: 0 2px 40px rgba(0,0,0,.25); }
.px-masktext { font-weight: var(--mask-weight, 600); }
@media (max-width: 760px) { .px-concept { left: 10px; bottom: 10px; max-width: 180px; padding: 7px 10px; font-size: 10.5px; } }
.px-hero-body { padding-top: 120px; }
.px-hero .px-h1 { margin: 20px 0 22px; }
.px-hero .px-lead { font-size: clamp(16px, 1.25vw, 19px); max-width: 540px; }
.px-hero--center .px-lead { max-width: 620px; }
.px[class*="px-style-"] .px-hero .px-h1 { font-size: clamp(44px, 7.6vw, 124px); }
.px-style-editorial .px-hero .px-h1, .px-style-bold .px-hero .px-h1, .px-upper .px-hero .px-h1 { font-size: clamp(40px, 6.4vw, 104px); }
.px-trustline { margin-top: 26px; padding-top: 18px; }
.px-stat strong.px-stat-sm { font-size: clamp(28px, 3vw, 46px); line-height: 1.05; padding-top: .3em; } .px-stat { min-width: 0; overflow-wrap: anywhere; padding-right: 18px; }

/* Contact form is always a white card with dark text, on every style (light and dark sites). Fixed Oct 20 2026:
   on dark styles the form inherited light text tokens, so labels, fields and typed text vanished on white. */
.px-form { --fm-ink: #14161a; --fm-muted: #4f545c; color: var(--fm-ink); background: #ffffff; }
.px-form h3, .px-form .px-thanks h3 { color: var(--fm-ink); }
.px-form > p, .px-form label, .px-form .px-note, .px-form .px-thanks p { color: var(--fm-muted); }
.px-form input, .px-form select, .px-form textarea { color: var(--fm-ink); background: #f4f5f7; border: 1px solid #cfd3da; }
.px-form input::placeholder, .px-form textarea::placeholder { color: #8a8f98; }
.px-form input:focus, .px-form select:focus, .px-form textarea:focus { background: #fff; border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent); }
.px-form select option { color: var(--fm-ink); background: #fff; }