/*
 * Premium Website Shop — main stylesheet.
 *
 * Values mirror the original HTML design (a 1440 px layout that grows
 * fluidly to 1920 px). The original only shipped desktop styles, so every
 * component carries its tablet and mobile rules right next to it.
 *
 *  1. Tokens               8. Services             15. Numbers (bento)
 *  2. Base                 9. Platforms            16. The craft
 *  3. Layout helpers      10. Portfolio, lightbox  17. Testimonials, clients
 *  4. Header, navigation  11. Packages             18. Homepage contact
 *  5. Buttons, lists      12. FAQ                  19. Inner pages
 *  6. Section headings    13. Steps, CTA band      20. Footer
 *  7. Homepage intro      14. Contact form         21. Blog fallbacks
 */

/* ==========================================================================
   1. Tokens (brand colours can be overridden from Theme Settings)
   ========================================================================== */

:root {
	--pad: clamp(24px, 5vw, 96px);
	--sec: clamp(96px, 7.6vw, 150px);
	--fs-h2: clamp(38px, 4.3vw, 82px);
	--fs-lead: clamp(17px, 1.15vw, 21px);
	--nav-h: 79px;
	--admin-bar: 0px;

	/* Same stacks as the original: glyphs missing from the brand fonts
	   (arrows, ticks) fall back to the same system font. */
	--font-display: 'Bricolage Grotesque', sans-serif;
	--font-body: 'Plus Jakarta Sans', sans-serif;
	--font-mono: ui-monospace, Menlo, Consolas, monospace;

	--pws-primary: #12D45C;
	--pws-primary-rgb: 18, 212, 92;
	--pws-primary-dark: #0BA748;
	--pws-on-primary: #05170B;
	--pws-on-primary-rgb: 5, 23, 11;
	--pws-ink: #0E0E0C;
	--pws-ink-rgb: 14, 14, 12;
	--pws-body: #5C5C54;
	--pws-bg: #FFFFFF;
	--pws-paper: #F2EFE9;
	--pws-paper-rgb: 242, 239, 233;
	--pws-surface: #F5F6F4;
	--pws-tint: #EAFBF1;
	--pws-secondary: #13251B;
	--pws-btn: #0E0E0C;
	--pws-btn-text: #F2EFE9;

	/* Fixed neutrals of the design (not exposed as settings). */
	--pws-grey-nav: #4A4A44;
	--pws-grey-label: #6A6A62;
	--pws-grey-caption: #8A8A80;
	--pws-grey-list: #3E4643;
	--pws-mint: #9BF5C0;
	--pws-error: #D93F44;
}

.admin-bar {
	--admin-bar: 32px;
}

@media (max-width: 782px) {
	.admin-bar {
		--admin-bar: 46px;
	}
}

@media (max-width: 600px) {
	/* The admin bar scrolls away on small screens. */
	.admin-bar {
		--admin-bar: 0px;
	}
}

@media (max-width: 768px) {
	:root {
		--sec: clamp(64px, 12vw, 96px);
	}
}

@media (max-width: 480px) {
	:root {
		--fs-h2: clamp(30px, 9.4vw, 38px);
		--fs-lead: 16.5px;
	}
}

@media (max-width: 360px) {
	:root {
		--pad: 20px;
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html,
body {
	margin: 0;
	padding: 0;
	background: var(--pws-bg);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

a {
	color: var(--pws-ink);
	text-decoration: none;
}

a:hover {
	color: var(--pws-ink);
}

img,
svg,
video {
	max-width: 100%;
}

img {
	height: auto;
}

input,
textarea,
select,
button {
	font-family: inherit;
}

::selection {
	background: var(--pws-primary);
	color: var(--pws-on-primary);
}

[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 2px solid var(--pws-primary);
	outline-offset: 3px;
}

.pws-site h1,
.pws-site h2,
.pws-site h3,
.pws-site p {
	overflow-wrap: break-word;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pws-skip {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--pws-ink);
	color: var(--pws-paper);
	font: 600 14px/1 var(--font-body);
	transform: translateY(-160%);
	transition: transform .2s ease;
}

.pws-skip:focus {
	transform: none;
	color: var(--pws-paper);
}

/* Lenis smooth scrolling. */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

html.pws-menu-open,
html.pws-lightbox-open {
	overflow: hidden;
}

@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mqr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes pwsCue { 0% { transform: scaleY(0); transform-origin: 50% 0; } 45% { transform: scaleY(1); transform-origin: 50% 0; } 55% { transform: scaleY(1); transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }
@keyframes pwsSnapA { 0%, 38% { left: 0%; } 50%, 88% { left: 50%; } 100% { left: 0%; } }
@keyframes pwsSnapB { 0%, 38% { left: 58.333%; } 50%, 88% { left: 0%; } 100% { left: 58.333%; } }
@keyframes pwsWght { 0%, 100% { font-weight: 200; } 50% { font-weight: 800; } }
@keyframes pwsSlide { 0%, 100% { left: 0%; } 50% { left: 100%; } }
@keyframes pwsX { 0% { transform: translateX(0); } 72%, 100% { transform: translateX(100%); } }
@keyframes pwsY { 0% { transform: translateY(0); } 72%, 100% { transform: translateY(-100%); } }
@keyframes pwsBlink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* Live demo sites inside the launch browser: 7 sites x 6 s = one 42 s loop. */
@keyframes pwsDemo { 0% { opacity: 0; } 1.2% { opacity: 1; } 14.3% { opacity: 1; } 15.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pwsSiteScroll { 0%, 6.4% { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 13.2%, 15.4% { transform: translateY(var(--dy, -59cqw)); } 15.5%, 100% { transform: translateY(0); } }
@keyframes pwsTab { 0%, 14.28% { background: #2A2A26; color: #F2EFE9; } 14.29%, 100% { background: transparent; color: rgba(242, 239, 233, .5); } }
@keyframes pwsUrl { 0%, 14.28% { opacity: 1; } 14.29%, 100% { opacity: 0; } }
@keyframes pwsLoad { 0% { transform: scaleX(0); opacity: 1; } 9% { transform: scaleX(1); opacity: 1; } 13%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes pwsCursor { 0% { transform: translate(80cqw, 48cqw); opacity: 0; } 8% { opacity: 1; } 32%, 36% { transform: translate(var(--cx, 11cqw), var(--cy, 34cqw)) scale(1); } 38% { transform: translate(var(--cx, 11cqw), var(--cy, 34cqw)) scale(.8); } 41% { transform: translate(var(--cx, 11cqw), var(--cy, 34cqw)) scale(1); } 86% { transform: translate(64cqw, 30cqw); opacity: 1; } 95%, 100% { transform: translate(64cqw, 30cqw); opacity: 0; } }
@keyframes pwsPress { 0%, 36% { transform: scale(1); } 38.5% { transform: scale(.93); } 42%, 100% { transform: scale(1); } }
@keyframes pwsRipple { 0%, 37% { transform: translate(-50%, -50%) scale(0); opacity: .5; } 52% { transform: translate(-50%, -50%) scale(1); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.pws-anim {
		animation: none !important;
	}
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.pws-site {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	overflow: clip;
	background: var(--pws-bg);
	color: var(--pws-ink);
	font-family: var(--font-body);
}

.pws-main {
	display: block;
}

.pws-grain {
	position: fixed;
	inset: 0;
	z-index: 70;
	pointer-events: none;
	background-image: url(../images/brand-grain.png);
	background-size: 180px 180px;
	opacity: .16;
	mix-blend-mode: multiply;
}

.pws-section {
	padding: var(--sec) var(--pad) 0;
}

.pws-section--last,
.pws-main > .pws-section:last-child {
	padding-bottom: var(--sec);
}

.pws-two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 1.4vw, 26px);
}

.pws-note {
	margin: clamp(22px, 1.8vw, 32px) 0 0;
	font-size: 13px;
	color: var(--pws-grey-caption);
}

@media (max-width: 760px) {
	.pws-two {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   4. Header and navigation
   ========================================================================== */

.pws-nav {
	position: sticky;
	top: var(--admin-bar);
	z-index: 60;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(var(--pws-ink-rgb), .1);
	transition: background .45s ease, border-color .45s ease;
}

.pws-nav__bar {
	height: 78px;
	padding: 0 var(--pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.pws-nav__brand {
	flex: none;
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.pws-nav__mark {
	display: block;
	height: 26px;
	width: auto;
}

.pws-nav__logo {
	display: block;
	height: 32px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}

.pws-nav__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.pws-menu {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	font-weight: 500;
}

.pws-menu li {
	position: relative;
}

.pws-menu a {
	color: var(--pws-grey-nav);
	white-space: nowrap;
}

.pws-menu a:hover {
	color: var(--pws-ink);
}

.pws-menu .current-menu-item > a,
.pws-menu .current_page_item > a,
.pws-menu .current-menu-ancestor > a,
.pws-menu a[aria-current="page"] {
	color: var(--pws-ink);
	font-weight: 600;
}

/* Desktop dropdowns (sub-menus added in Appearance → Menus). */
.pws-menu > .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 0 3px 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.pws-menu .sub-menu {
	position: absolute;
	top: calc(100% + 16px);
	left: -14px;
	z-index: 5;
	min-width: 210px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: rgba(255, 255, 255, .98);
	border: 1px solid rgba(var(--pws-ink-rgb), .1);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(var(--pws-ink-rgb), .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.pws-menu .sub-menu::before {
	/* Hover bridge between the link and the panel. */
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -18px;
	height: 18px;
}

.pws-menu li:hover > .sub-menu,
.pws-menu li:focus-within > .sub-menu,
.pws-menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.pws-menu .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--pws-grey-nav);
	white-space: normal;
}

.pws-menu .sub-menu a:hover {
	background: var(--pws-surface);
	color: var(--pws-ink);
}

.pws-nav__sub-toggle {
	display: none;
}

.pws-nav__actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
}

.pws-nav__toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(var(--pws-ink-rgb), .16);
	border-radius: 50%;
	background: transparent;
	color: var(--pws-ink);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.pws-nav__toggle-lines {
	position: relative;
	display: block;
	width: 18px;
	height: 8px;
}

.pws-nav__toggle-lines span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.6px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .3s ease, top .3s ease;
}

.pws-nav__toggle-lines span:first-child {
	top: 0;
}

.pws-nav__toggle-lines span:last-child {
	top: 6.4px;
}

.pws-nav__toggle[aria-expanded="true"] .pws-nav__toggle-lines span:first-child {
	top: 3.2px;
	transform: rotate(45deg);
}

.pws-nav__toggle[aria-expanded="true"] .pws-nav__toggle-lines span:last-child {
	top: 3.2px;
	transform: rotate(-45deg);
}

/* Dark glass bar while the homepage intro stage is dark. */
.pws-nav.is-dark {
	background: rgba(var(--pws-ink-rgb), .96);
	border-bottom-color: rgba(var(--pws-paper-rgb), .1);
}

.pws-nav.is-dark a,
.pws-nav.is-dark .pws-menu a {
	color: rgba(var(--pws-paper-rgb), .8);
}

.pws-nav.is-dark a:hover,
.pws-nav.is-dark .pws-menu a:hover {
	color: var(--pws-primary);
}

.pws-nav.is-dark .pws-cta,
.pws-nav.is-dark .pws-cta:hover {
	background: var(--pws-primary);
	color: var(--pws-on-primary);
}

.pws-nav.is-dark .pws-cta .pws-btn__dot {
	background: var(--pws-on-primary);
	color: var(--pws-primary);
}

.pws-nav.is-dark .pws-nav__toggle {
	border-color: rgba(var(--pws-paper-rgb), .25);
	color: var(--pws-paper);
}

.pws-nav.is-dark .sub-menu a {
	color: var(--pws-grey-nav);
}

/* Mobile menu panel. */
.pws-mobile {
	position: fixed;
	inset: 0;
	z-index: 59;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	padding: calc(var(--nav-h) + var(--admin-bar) + 16px) var(--pad) max(28px, env(safe-area-inset-bottom));
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--pws-bg);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.pws-mobile.is-open {
	opacity: 1;
	transform: none;
}

.pws-menu--mobile {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.pws-menu--mobile > li {
	border-bottom: 1px solid rgba(var(--pws-ink-rgb), .1);
}

.pws-menu--mobile a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(26px, 7.4vw, 38px);
	line-height: 1;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: var(--pws-ink);
	white-space: normal;
}

.pws-menu--mobile > li > a::after {
	content: '↗';
	flex: none;
	font-size: .55em;
	color: var(--pws-primary);
	letter-spacing: 0;
	border: 0;
	width: auto;
	height: auto;
	margin: 0;
	transform: none;
}

.pws-menu--mobile .current-menu-item > a,
.pws-menu--mobile a[aria-current="page"] {
	color: var(--pws-primary-dark);
}

.pws-menu--mobile .menu-item-has-children > a {
	padding-right: 56px;
}

.pws-menu--mobile .menu-item-has-children > a::after {
	display: none;
}

.pws-menu--mobile .pws-nav__sub-toggle {
	position: absolute;
	top: 12px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(var(--pws-ink-rgb), .16);
	border-radius: 50%;
	background: transparent;
	color: var(--pws-ink);
	font-size: 20px;
	cursor: pointer;
}

.pws-menu--mobile .sub-menu {
	position: static;
	display: none;
	min-width: 0;
	margin: 0 0 14px;
	padding: 0 0 0 14px;
	border: 0;
	border-left: 2px solid var(--pws-primary);
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.pws-menu--mobile .sub-menu::before {
	display: none;
}

.pws-menu--mobile li.is-open > .sub-menu {
	display: block;
}

.pws-menu--mobile .sub-menu a {
	padding: 10px 0;
	font-size: 20px;
	text-transform: none;
	letter-spacing: -.02em;
}

.pws-mobile__foot {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pws-mobile__cta {
	justify-content: space-between;
}

.pws-mobile__email {
	align-self: flex-start;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(var(--pws-ink-rgb), .2);
	font-size: 14px;
	font-weight: 500;
	color: var(--pws-body);
	overflow-wrap: anywhere;
}

.pws-menu-open .pws-nav,
.pws-menu-open .pws-nav.is-dark {
	background: rgba(255, 255, 255, .98);
	border-bottom-color: rgba(var(--pws-ink-rgb), .1);
}

.pws-menu-open .pws-nav.is-dark a,
.pws-menu-open .pws-nav.is-dark .pws-menu a {
	color: var(--pws-ink);
}

.pws-menu-open .pws-nav.is-dark .pws-nav__toggle {
	border-color: rgba(var(--pws-ink-rgb), .16);
	color: var(--pws-ink);
}

.pws-menu-open .pws-nav.is-dark .pws-cta {
	background: var(--pws-btn);
	color: var(--pws-btn-text);
}

.pws-menu-open .pws-nav.is-dark .pws-cta .pws-btn__dot {
	background: var(--pws-primary);
	color: var(--pws-on-primary);
}

/* Compact header: hamburger when the links no longer fit. */
.pws-nav.is-compact .pws-nav__menu {
	display: none;
}

.pws-nav.is-compact .pws-nav__toggle {
	display: inline-flex;
}

@media (max-width: 960px) {
	.pws-nav__menu {
		display: none;
	}

	.pws-nav__toggle {
		display: inline-flex;
	}
}

@media (min-width: 961px) {
	.pws-nav:not(.is-compact) ~ .pws-mobile {
		display: none !important;
	}
}

@media (max-width: 520px) {
	.pws-nav__bar {
		height: 68px;
	}

	:root {
		--nav-h: 69px;
	}

	.pws-nav__actions .pws-cta {
		display: none;
	}
}

@media (max-width: 340px) {
	.pws-nav__name {
		font-size: 14px;
	}
}

/* ==========================================================================
   5. Buttons and lists
   ========================================================================== */

.pws-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: normal;
	text-align: left;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.pws-btn__dot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 13px;
}

.pws-btn--dark {
	padding: 15px 10px 15px 26px;
	background: var(--pws-btn);
	color: var(--pws-btn-text);
}

.pws-btn--dark .pws-btn__dot {
	background: var(--pws-primary);
	color: var(--pws-on-primary);
}

.pws-btn--dark:hover {
	background: var(--pws-primary);
	color: var(--pws-on-primary);
}

.pws-btn--green {
	padding: 15px 10px 15px 26px;
	background: var(--pws-primary);
	color: var(--pws-on-primary);
}

.pws-btn--green .pws-btn__dot {
	background: var(--pws-on-primary);
	color: var(--pws-primary);
}

.pws-btn--green:hover {
	background: var(--pws-paper);
	color: var(--pws-ink);
}

.pws-btn--outline {
	gap: 10px;
	padding: 15px 26px;
	border: 1px solid rgba(var(--pws-ink-rgb), .22);
	color: var(--pws-ink);
}

.pws-btn--outline:hover {
	background: var(--pws-ink);
	border-color: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-btn--outline-light {
	gap: 10px;
	padding: 15px 26px;
	border: 1px solid rgba(var(--pws-paper-rgb), .3);
	color: var(--pws-paper);
}

.pws-btn--outline-light:hover {
	background: var(--pws-paper);
	color: var(--pws-ink);
}

.pws-btn--compact,
.pws-btn--block {
	padding: 13px 10px 13px 24px;
}

.pws-btn--compact .pws-btn__dot,
.pws-btn--block .pws-btn__dot {
	width: 28px;
	height: 28px;
	font-size: 12px;
}

.pws-btn--block {
	justify-content: space-between;
	gap: 14px;
}

.pws-btn--small {
	padding: 12px 22px;
}

/* Header call to action. */
.pws-cta {
	gap: 9px;
	padding: 11px 8px 11px 20px;
	font-size: 13px;
	transition: background .3s ease;
}

.pws-cta .pws-btn__dot {
	width: 24px;
	height: 24px;
	font-size: 12px;
}

.pws-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.pws-textlink {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--pws-ink);
}

.pws-textlink:hover {
	color: var(--pws-primary-dark);
}

.pws-textlink__dot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--pws-tint);
	color: var(--pws-primary-dark);
	font-size: 11px;
}

.pws-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: clamp(15px, .98vw, 18px);
	line-height: 1.55;
	color: var(--pws-grey-list);
}

.pws-check__dot {
	flex: none;
	margin-top: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pws-primary);
	color: var(--pws-on-primary);
	font-size: 9px;
	line-height: 1;
}

.pws-check--light {
	color: rgba(var(--pws-paper-rgb), .82);
}

.pws-check--pkg {
	gap: 11px;
	font-size: clamp(14px, 1.02vw, 16.5px);
	color: inherit;
}

.pws-check--pkg .pws-check__dot {
	margin-top: 2px;
	width: 17px;
	height: 17px;
}

.pws-check--contact {
	font-size: 15.5px;
	color: rgba(var(--pws-paper-rgb), .84);
}

.pws-check--contact .pws-check__dot {
	width: 16px;
	height: 16px;
}

@media (max-width: 400px) {
	.pws-btn--dark,
	.pws-btn--green {
		padding-left: 22px;
	}

	.pws-btn--outline,
	.pws-btn--outline-light {
		padding-left: 22px;
		padding-right: 22px;
	}
}

/* ==========================================================================
   6. Section headings and inner page header
   ========================================================================== */

.pws-eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pws-grey-label);
}

.pws-h2 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-h2);
	line-height: .92;
	letter-spacing: -.045em;
	text-transform: uppercase;
}

.pws-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 27em);
	align-items: end;
	gap: clamp(40px, 5vw, 96px);
	margin-bottom: clamp(34px, 2.8vw, 54px);
}

.pws-head__text {
	margin: 0;
	font-size: clamp(16px, 1.05vw, 20px);
	line-height: 1.7;
	color: var(--pws-body);
}

.pws-head__text--with-link {
	margin-bottom: 18px;
}

.pws-head--reasons {
	margin-bottom: clamp(26px, 2.1vw, 38px);
}

.pws-head--platforms {
	grid-template-columns: minmax(0, 1fr) minmax(0, clamp(26em, 30vw, 35em));
}

.pws-head--platforms .pws-head__text {
	margin-bottom: 22px;
}

.pws-pagehero {
	padding: clamp(48px, 4.4vw, 88px) var(--pad) clamp(40px, 3.4vw, 68px);
	border-bottom: 1px solid rgba(var(--pws-ink-rgb), .1);
}

.pws-pagehero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 28em);
	align-items: end;
	gap: clamp(30px, 4vw, 80px);
}

@media (max-width: 900px) {
	.pws-head,
	.pws-head--platforms,
	.pws-pagehero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.pws-head {
		margin-bottom: 32px;
	}

	.pws-head--platforms .pws-head__text {
		margin-bottom: 0;
	}

	.pws-head__text,
	.pws-pagehero__grid > .pws-head__text {
		max-width: 38em;
	}
}

@media (max-width: 480px) {
	.pws-pagehero {
		padding-top: 40px;
		padding-bottom: 36px;
	}
}

/* ==========================================================================
   7. Homepage intro (sticky scroll story)
   ========================================================================== */

.pws-intro {
	position: relative;
	height: 460vh;
}

.pws-intro__stage {
	position: sticky;
	top: calc(var(--nav-h) + var(--admin-bar));
	height: calc(100vh - var(--nav-h) - var(--admin-bar));
	height: calc(100svh - var(--nav-h) - var(--admin-bar));
	overflow: hidden;
	background: #FFFFFF;
}

.pws-intro__bar {
	position: absolute;
	z-index: 5;
	left: 0;
	top: 0;
	width: 0%;
	height: 2px;
	background: var(--pws-primary);
	opacity: 0;
}

/* Launch browser window. */
.pws-frame {
	position: absolute;
	z-index: 1;
	left: 61%;
	top: 53%;
	width: min(46vw, calc((100vh - var(--nav-h)) * 1.05));
	aspect-ratio: 16 / 10.4;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	overflow: hidden;
	background: #161614;
	border: 1px solid rgba(242, 239, 233, .14);
	box-shadow: 0 60px 120px rgba(0, 0, 0, .55);
	opacity: 0;
	transform: translate(-50%, -50%) scale(.3);
}

.pws-frame__tabs {
	flex: none;
	height: 4.6cqw;
	display: flex;
	align-items: flex-end;
	gap: .35cqw;
	padding: 0 1.2cqw;
	background: #161614;
}

.pws-frame__lights {
	flex: none;
	align-self: center;
	display: flex;
	gap: .7cqw;
	margin-right: 1cqw;
}

.pws-frame__lights span {
	width: 1.05cqw;
	height: 1.05cqw;
	border-radius: 50%;
	background: #FF5F57;
}

.pws-frame__lights span:nth-child(2) {
	background: #FEBC2E;
}

.pws-frame__lights span:nth-child(3) {
	background: #28C840;
}

.pws-frame__tab {
	flex: 1 1 0;
	min-width: 0;
	height: 3.5cqw;
	display: flex;
	align-items: center;
	gap: .6cqw;
	padding: 0 1cqw;
	border-radius: .9cqw .9cqw 0 0;
	font-size: max(8.5px, 1.05cqw);
	white-space: nowrap;
	color: rgba(242, 239, 233, .5);
	animation: pwsTab 42s linear infinite;
	animation-delay: calc(var(--i) * 6s - 42s);
}

.pws-frame__tab-dot {
	flex: none;
	width: .9cqw;
	height: .9cqw;
	border-radius: 50%;
}

.pws-frame__tab-name {
	overflow: hidden;
	text-overflow: ellipsis;
}

.pws-frame__urlbar {
	flex: none;
	height: 4.4cqw;
	display: flex;
	align-items: center;
	gap: 1.4cqw;
	padding: 0 1.6cqw;
	background: #2A2A26;
	font-size: max(9px, 1.1cqw);
	color: rgba(242, 239, 233, .45);
}

.pws-frame__url {
	position: relative;
	flex: 1;
	height: 2.8cqw;
	border-radius: 99px;
	background: rgba(0, 0, 0, .35);
}

.pws-frame__url-item {
	position: absolute;
	left: 1.4cqw;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: .7cqw;
	white-space: nowrap;
	color: rgba(242, 239, 233, .6);
	animation: pwsUrl 42s linear infinite;
	animation-delay: calc(var(--i) * 6s - 42s);
}

.pws-frame__url-item svg {
	width: 1.1cqw;
	height: 1.1cqw;
}

.pws-frame__url-slug {
	color: #F2EFE9;
}

.pws-frame__view {
	position: relative;
	flex: 1;
	overflow: hidden;
	background: #0E0E0C;
}

.pws-frame__load {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 2px;
	background: var(--pws-primary);
	transform-origin: 0 50%;
	animation: pwsLoad 6s linear infinite;
}

.pws-demo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	animation: pwsDemo 42s linear infinite;
	animation-delay: calc(var(--i) * 6s - 42s);
}

.pws-demo p {
	margin: 0;
}

.pws-demo__scroll {
	animation: pwsSiteScroll 42s linear infinite;
	animation-delay: calc(var(--i) * 6s - 42s);
}

.pws-demo__hero {
	position: relative;
	height: 50cqw;
	overflow: hidden;
}

.pws-demo__hero-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0%;
}

.pws-demo__shade {
	position: absolute;
	inset: 0;
}

.pws-demo__nav {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 6.4cqw;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2.6cqw;
	padding: 0 3.2cqw;
	font-size: 1.12cqw;
	font-weight: 500;
}

.pws-demo__nav-link {
	opacity: .82;
}

.pws-demo__nav-cta {
	padding: .75cqw 1.6cqw;
	border-radius: 99px;
	font-weight: 600;
}

.pws-demo__copy {
	position: absolute;
	left: 4.5cqw;
	top: 14cqw;
	width: 40cqw;
}

.pws-demo p.pws-demo__eyebrow {
	margin: 0 0 1.2cqw;
	font-size: 1cqw;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.pws-demo__headline {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 3.7cqw;
	line-height: 1.02;
	letter-spacing: -.035em;
}

.pws-demo p.pws-demo__sub {
	margin: 1.4cqw 0 0;
	max-width: 32cqw;
	font-size: 1.3cqw;
	line-height: 1.5;
	opacity: .8;
}

.pws-demo__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .8cqw;
	margin-top: 2.2cqw;
	padding: 1.1cqw 2.2cqw;
	border-radius: 99px;
	font-size: 1.25cqw;
	font-weight: 600;
	animation: pwsPress 6s linear infinite;
}

.pws-demo__ripple {
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: 10cqw;
	height: 10cqw;
	border-radius: 50%;
	pointer-events: none;
	animation: pwsRipple 6s ease-out infinite;
}

.pws-demo__split {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 4.5cqw;
	align-items: center;
	padding: 5.5cqw 4.5cqw 4.5cqw;
}

.pws-demo__h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2.7cqw;
	line-height: 1.08;
	letter-spacing: -.03em;
}

.pws-demo p.pws-demo__p2 {
	margin: 1.4cqw 0 0;
	font-size: 1.22cqw;
	line-height: 1.6;
	opacity: .72;
}

.pws-demo__points {
	display: flex;
	flex-direction: column;
	gap: 1cqw;
	margin-top: 2cqw;
	font-size: 1.2cqw;
	font-weight: 500;
}

.pws-demo__point {
	display: flex;
	align-items: center;
	gap: 1cqw;
}

.pws-demo__tick {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.8cqw;
	height: 1.8cqw;
	border-radius: 50%;
	font-size: .9cqw;
}

.pws-demo__card-img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1.4cqw;
	box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .22);
}

.pws-demo__band {
	margin: 0 4.5cqw;
	padding: 3.2cqw 3.6cqw;
	border-radius: 1.6cqw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3cqw;
}

.pws-demo__band-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2.2cqw;
	letter-spacing: -.025em;
}

.pws-demo__band-cta {
	flex: none;
	padding: 1cqw 2cqw;
	border-radius: 99px;
	font-size: 1.2cqw;
	font-weight: 600;
}

.pws-demo__foot {
	margin-top: 4.5cqw;
	padding: 3cqw 4.5cqw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #F2EFE9;
	font-size: 1.05cqw;
}

.pws-demo__foot-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.6cqw;
	letter-spacing: -.02em;
}

.pws-demo__foot-by {
	opacity: .6;
}

.pws-demo__cursor {
	position: absolute;
	left: 0;
	top: 0;
	width: 2.3cqw;
	height: 2.3cqw;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
	animation: pwsCursor 6s cubic-bezier(.45, 0, .25, 1) infinite;
}

/* 3D logo canvas and its flat fallback. */
.pws-intro__gl {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.pws-intro__fallback {
	position: absolute;
	z-index: 2;
	left: 74%;
	top: 44%;
	width: auto;
	height: 40%;
	max-width: none;
	transform: translate(-50%, -50%) rotate(-6deg);
	filter: drop-shadow(0 30px 40px rgba(14, 14, 12, .18));
	pointer-events: none;
}

/* Hero copy. */
.pws-intro__hero {
	position: absolute;
	z-index: 3;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 5vh, 70px) var(--pad) clamp(18px, 2.8vh, 34px);
	pointer-events: none;
}

.pws-intro__top {
	align-self: flex-start;
}

.pws-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 10px;
	border-radius: 999px;
	border: 1px solid rgba(var(--pws-ink-rgb), .18);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .02em;
}

.pws-badge__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pws-primary);
}

.pws-intro__title {
	margin: clamp(16px, 2.6vh, 38px) 0 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(46px, min(6.3vw, 10.4vh), 118px);
	line-height: .9;
	letter-spacing: -.052em;
	text-transform: uppercase;
}

.pws-intro__line {
	display: block;
	will-change: transform, opacity;
}

.pws-intro__mask {
	display: inline-block;
	overflow: hidden;
	padding-bottom: .16em;
	margin-bottom: -.16em;
	vertical-align: bottom;
}

.pws-intro__word {
	display: inline-block;
	color: var(--pws-primary);
}

.pws-intro__copy {
	align-self: flex-start;
	pointer-events: auto;
}

.pws-intro__lead {
	margin: clamp(18px, 2.8vh, 42px) 0 0;
	max-width: 34em;
	font-size: var(--fs-lead);
	line-height: 1.68;
	color: var(--pws-grey-nav);
}

.pws-intro__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: clamp(20px, 3.2vh, 46px);
}

.pws-intro__foot {
	margin-top: auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: 40px;
	padding-top: clamp(16px, 2.2vh, 26px);
	border-top: 1px solid rgba(var(--pws-ink-rgb), .14);
	pointer-events: auto;
}

.pws-intro__build {
	justify-self: start;
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.4vw, 26px);
	color: var(--pws-body);
	transition: color .3s ease;
}

.pws-intro__build:hover {
	color: var(--pws-ink);
}

.pws-intro__build-label {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pws-grey-caption);
	white-space: nowrap;
}

.pws-intro__build-icons {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.2vw, 22px);
}

.pws-intro__build-icons svg {
	display: block;
	width: clamp(20px, 1.4vw, 26px);
	height: clamp(20px, 1.4vw, 26px);
}

.pws-intro__build-more {
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.pws-intro__cue {
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pws-grey-caption);
	white-space: nowrap;
}

.pws-intro__cue-line {
	position: relative;
	width: 1px;
	height: 34px;
	overflow: hidden;
	background: rgba(var(--pws-ink-rgb), .15);
}

.pws-intro__cue-line span {
	position: absolute;
	inset: 0;
	background: var(--pws-ink);
	animation: pwsCue 1.8s cubic-bezier(.7, 0, .3, 1) infinite;
}

.pws-intro__stats {
	justify-self: end;
	display: flex;
	gap: clamp(40px, 3.9vw, 72px);
	font-size: 14px;
	color: var(--pws-grey-label);
}

.pws-intro__stat {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(28px, 2.1vw, 40px);
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--pws-ink);
}

/* Scroll story steps and their side rail. */
.pws-intro__steps {
	position: absolute;
	z-index: 3;
	left: var(--pad);
	top: 50%;
	width: min(29vw, 540px);
	height: 0;
	color: var(--pws-paper);
	pointer-events: none;
}

.pws-intro__step {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	opacity: 0;
	transform: translateY(-50%);
}

.pws-intro__step-k {
	margin: 0 0 18px;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pws-primary);
}

.pws-intro__step-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(32px, min(3.1vw, 5.6vh), 60px);
	line-height: .94;
	letter-spacing: -.045em;
	text-transform: uppercase;
}

.pws-intro__step-body {
	margin: 22px 0 0;
	max-width: 24em;
	font-size: var(--fs-lead);
	line-height: 1.65;
	color: rgba(var(--pws-paper-rgb), .7);
}

.pws-intro__stepnav {
	position: absolute;
	z-index: 4;
	right: var(--pad);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 4px;
	opacity: 0;
	pointer-events: none;
}

.pws-intro__navitem {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	padding: 8px 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(var(--pws-paper-rgb), .42);
	transition: color .3s ease;
}

.pws-intro__navdot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(var(--pws-paper-rgb), .25);
	font-size: 11px;
	letter-spacing: 0;
	transition: background .3s ease, border-color .3s ease, color .3s ease;
}

@media (max-width: 1180px) {
	.pws-intro__foot {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.pws-intro__cue {
		display: none;
	}
}

@media (max-width: 1024px) {
	.pws-intro__steps {
		width: min(40vw, 460px);
	}
}

/* Portrait tablets and phones: stacked story, logo above the text. */
@media (max-width: 860px) {
	.pws-intro__title {
		font-size: clamp(36px, min(12vw, 8.4vh), 76px);
	}

	.pws-intro__foot {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.pws-intro__build {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.pws-intro__build-label {
		flex-basis: 100%;
	}

	.pws-intro__stats {
		justify-self: stretch;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px 20px;
		font-size: 13px;
	}

	.pws-intro__stat {
		font-size: clamp(24px, 6.4vw, 34px);
	}

	.pws-intro__fallback {
		left: auto;
		right: var(--pad);
		top: clamp(20px, 4vh, 48px);
		height: clamp(70px, 24vw, 150px);
		transform: rotate(-6deg);
	}

	.pws-frame {
		left: 50%;
		top: 40%;
		width: min(calc(100vw - 2 * var(--pad)), calc((100svh - var(--nav-h)) * .56));
	}

	.pws-intro__steps {
		left: var(--pad);
		right: calc(var(--pad) + 40px);
		top: 71%;
		width: auto;
	}

	.pws-intro__step-k {
		margin-bottom: 12px;
	}

	.pws-intro__step-title {
		font-size: clamp(28px, 8.2vw, 46px);
	}

	.pws-intro__step-body {
		margin-top: 14px;
		font-size: 16px;
	}

	.pws-intro__stepnav {
		top: 71%;
		right: calc(var(--pad) - 6px);
	}

	.pws-intro__navitem {
		padding: 4px 0;
	}

	.pws-intro__navlabel {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.pws-intro__navdot {
		width: 28px;
		height: 28px;
		font-size: 10px;
	}
}

@media (max-width: 480px) {
	.pws-intro__lead {
		font-size: 15.5px;
		line-height: 1.6;
	}

	.pws-intro__buttons {
		gap: 10px;
	}

	.pws-intro__build-icons {
		gap: 12px;
	}
}

/* Short phone screens: keep the whole hero inside the stage. */
@media (max-width: 860px) and (max-height: 700px) {
	.pws-intro__hero {
		padding-top: 18px;
	}

	.pws-intro__title {
		margin-top: 12px;
		font-size: clamp(32px, min(11vw, 7.6vh), 64px);
	}

	.pws-intro__lead {
		margin-top: 12px;
		font-size: 14.5px;
	}

	.pws-intro__buttons {
		margin-top: 14px;
	}

	.pws-intro__buttons .pws-btn {
		padding-top: 11px;
		padding-bottom: 11px;
	}

	.pws-intro__build {
		display: none;
	}
}

@media (max-width: 860px) and (max-height: 580px) {
	.pws-intro__lead {
		display: none;
	}
}

/* Narrow phones: the stats stay on one row; a long label wraps inside its column. */
@media (max-width: 480px) {
	.pws-intro__stats {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, auto);
		justify-content: space-between;
		gap: 12px;
	}
}

@media (max-width: 360px) {
	.pws-intro__stats {
		font-size: 12px;
	}
}

/* ==========================================================================
   8. Services
   ========================================================================== */

.pws-svc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.3vw, 24px);
}

.pws-svc {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	border-radius: 10px;
	padding: clamp(26px, 2.1vw, 40px);
	background: var(--pws-bg);
	color: var(--pws-ink);
	border: 1px solid rgba(var(--pws-ink-rgb), .14);
	transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease, color .4s ease;
}

.pws-svc h3,
.pws-svc p,
.pws-svc > span,
.pws-svc .pws-svc-list,
.pws-svc .pws-svc-pt {
	transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

.pws-svc-num {
	position: absolute;
	top: clamp(-14px, -1vw, -8px);
	right: clamp(10px, 1.2vw, 22px);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(58px, 4.8vw, 92px);
	line-height: 1;
	letter-spacing: -.05em;
	color: rgba(var(--pws-ink-rgb), .05);
	pointer-events: none;
}

.pws-svc-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(46px, 3.4vw, 58px);
	height: clamp(46px, 3.4vw, 58px);
	border-radius: 14px;
	background: var(--pws-tint);
	color: var(--pws-primary);
}

.pws-svc-icon svg {
	width: 48%;
	height: 48%;
}

.pws-svc-h {
	position: relative;
	margin: clamp(20px, 1.6vw, 30px) 0 10px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 1.25vw, 23px);
	letter-spacing: -.03em;
	line-height: 1.15;
}

.pws-svc-p {
	position: relative;
	margin: 0;
	font-size: clamp(15px, .95vw, 17.5px);
	line-height: 1.65;
	color: var(--pws-body);
}

.pws-svc-list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: clamp(20px, 1.6vw, 28px) 0 clamp(22px, 1.8vw, 32px);
	padding-top: clamp(20px, 1.6vw, 28px);
	border-top: 1px solid rgba(var(--pws-ink-rgb), .12);
}

.pws-svc-pt {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pws-grey-list);
}

.pws-svc-tick {
	flex: none;
	margin-top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--pws-primary);
	color: var(--pws-on-primary);
	font-size: 8.5px;
	line-height: 1;
}

.pws-svc-cta {
	position: relative;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--pws-ink);
}

.pws-svc-grid--home .pws-svc-cta {
	font-size: 14px;
}

.pws-svc-arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--pws-tint);
	color: var(--pws-primary-dark);
	font-size: 11px;
	transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.pws-svc:hover,
.pws-svc:focus-visible {
	background: var(--pws-ink);
	border-color: var(--pws-ink);
	color: var(--pws-paper);
	box-shadow: 0 26px 54px rgba(var(--pws-ink-rgb), .2);
}

.pws-svc:hover .pws-svc-num,
.pws-svc:focus-visible .pws-svc-num {
	color: rgba(var(--pws-paper-rgb), .07);
}

.pws-svc:hover .pws-svc-icon,
.pws-svc:focus-visible .pws-svc-icon {
	background: rgba(var(--pws-primary-rgb), .16);
}

.pws-svc:hover .pws-svc-h,
.pws-svc:focus-visible .pws-svc-h {
	color: var(--pws-paper);
}

.pws-svc:hover .pws-svc-p,
.pws-svc:focus-visible .pws-svc-p {
	color: rgba(var(--pws-paper-rgb), .62);
}

.pws-svc:hover .pws-svc-list,
.pws-svc:focus-visible .pws-svc-list {
	border-top-color: rgba(var(--pws-paper-rgb), .16);
}

.pws-svc:hover .pws-svc-pt,
.pws-svc:focus-visible .pws-svc-pt {
	color: rgba(var(--pws-paper-rgb), .85);
}

.pws-svc:hover .pws-svc-cta,
.pws-svc:focus-visible .pws-svc-cta {
	color: var(--pws-primary);
}

.pws-svc:hover .pws-svc-arrow,
.pws-svc:focus-visible .pws-svc-arrow {
	background: var(--pws-primary);
	color: var(--pws-on-primary);
	transform: translateX(6px);
}

.pws-svc-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin-top: clamp(16px, 1.3vw, 24px);
	padding: clamp(22px, 1.8vw, 32px) clamp(26px, 2.1vw, 40px);
	border-radius: 10px;
	background: var(--pws-surface);
}

.pws-svc-band__text {
	flex: 1 1 320px;
	margin: 0;
	font-size: clamp(15px, 1vw, 19px);
	line-height: 1.5;
	color: var(--pws-ink);
}

.pws-svc-band .pws-btn {
	flex: none;
}

@media (max-width: 1100px) {
	.pws-svc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.pws-svc-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pws-svc-band .pws-btn {
		width: 100%;
		justify-content: space-between;
	}
}

/* ==========================================================================
   9. Platforms (filter chips + logo grid)
   ========================================================================== */

.pws-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: clamp(30px, 2.4vw, 46px);
}

.pws-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border-radius: 999px;
	border: 1px solid rgba(var(--pws-ink-rgb), .22);
	background: transparent;
	color: var(--pws-ink);
	font-size: 13px;
	font-weight: 500;
	line-height: normal;
	cursor: pointer;
	transition: all .25s ease;
}

.pws-chip__count {
	font-size: 11px;
	opacity: .6;
}

.pws-chip.is-active {
	border-color: var(--pws-ink);
	background: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-chips--page {
	gap: 8px;
	margin-bottom: clamp(26px, 2.2vw, 40px);
}

.pws-chips--page .pws-chip {
	padding: 10px 17px;
	font-size: 13.5px;
}

.pws-chips--page .pws-chip__count {
	font-size: 11.5px;
}

.pws-chips--work {
	margin-bottom: clamp(26px, 2.2vw, 40px);
}

.pws-chips--work .pws-chip {
	gap: 9px;
	padding: 10px 18px;
	font-size: 13.5px;
	border-color: rgba(var(--pws-ink-rgb), .2);
}

.pws-chips--work .pws-chip.is-active {
	border-color: var(--pws-ink);
}

.pws-chips--work .pws-chip__count {
	font-size: 11.5px;
	opacity: .55;
}

.pws-plat {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	border-top: 1px solid rgba(var(--pws-ink-rgb), .16);
	border-left: 1px solid rgba(var(--pws-ink-rgb), .16);
}

.pws-plat__tile {
	position: relative;
	aspect-ratio: 1 / .8;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(14px, 1.15vw, 22px);
	border-right: 1px solid rgba(var(--pws-ink-rgb), .16);
	border-bottom: 1px solid rgba(var(--pws-ink-rgb), .16);
	color: var(--pws-ink);
	transition: background .35s ease, color .35s ease, opacity .4s ease;
}

.pws-plat__tile:hover {
	background: #F7F8F7;
	color: var(--brand);
}

.pws-plat__tile.is-dim {
	opacity: .16;
}

.pws-plat__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pws-grey-caption);
}

.pws-plat__meta span:first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Two narrow columns: tighten the label so "Self-hosted" fits beside its number. */
@media (max-width: 400px) {
	.pws-plat__meta {
		font-size: 10px;
		letter-spacing: .06em;
	}
}

.pws-plat__logo {
	display: block;
	align-self: center;
	width: clamp(34px, 2.5vw, 48px);
	height: clamp(34px, 2.5vw, 48px);
}

.pws-plat__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(15px, 1.05vw, 20px);
	letter-spacing: -.02em;
	text-align: center;
	color: var(--pws-ink);
}

@media (min-width: 1680px) {
	.pws-plat {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

@media (max-width: 959px) {
	.pws-plat {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.pws-plat {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.pws-plat {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   10. Portfolio and lightbox
   ========================================================================== */

.pws-work-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.4vw, 26px);
}

.pws-work {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	background: var(--pws-bg);
	border: 1px solid rgba(var(--pws-ink-rgb), .12);
	cursor: pointer;
	transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease, color .4s ease;
}

.pws-work:hover,
.pws-work:focus-within {
	border-color: rgba(var(--pws-primary-rgb), .5);
	box-shadow: 0 26px 54px rgba(var(--pws-ink-rgb), .12);
}

.pws-work.is-hidden {
	display: none;
}

.pws-work--wide {
	grid-column: span 2;
}

.pws-work__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--pws-surface);
}

.pws-work--wide .pws-work__media {
	aspect-ratio: 2.35 / 1;
}

.pws-work-all {
	display: flex;
	justify-content: center;
	margin-top: clamp(36px, 3.4vw, 56px);
}

.pws-work-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.pws-work:hover .pws-work-img {
	transform: scale(1.055);
}

.pws-work__tag {
	position: absolute;
	bottom: 14px;
	left: 14px;
	max-width: calc(100% - 28px);
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #0E0E0C;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pws-work__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(20px, 1.6vw, 32px);
}

.pws-work__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.pws-work__name {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 1.3vw, 25px);
	letter-spacing: -.03em;
	line-height: 1.2;
}

.pws-work-arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(var(--pws-ink-rgb), .16);
	font-size: 13px;
	transition: background .35s ease, border-color .35s ease, color .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

.pws-work:hover .pws-work-arrow {
	background: var(--pws-primary);
	border-color: var(--pws-primary);
	color: var(--pws-on-primary);
	transform: translate(2px, -2px);
}

.pws-work__text {
	margin: 0;
	max-width: 40em;
	font-size: clamp(15px, .92vw, 17.5px);
	line-height: 1.6;
	color: var(--pws-body);
}

.pws-work__open {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	cursor: pointer;
}

.pws-work__open:focus-visible {
	outline-offset: -4px;
}

.pws-work-next {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 26px;
	min-height: clamp(280px, 22vw, 420px);
	padding: clamp(26px, 2.1vw, 40px);
	border-radius: 12px;
	background: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-work-next__eyebrow {
	margin: 0;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pws-primary);
}

.pws-work-next__title {
	margin: 0 0 12px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(22px, 1.7vw, 32px);
	letter-spacing: -.035em;
	line-height: 1.1;
}

.pws-work-next__text {
	margin: 0;
	font-size: clamp(15px, .92vw, 17.5px);
	line-height: 1.6;
	color: rgba(var(--pws-paper-rgb), .66);
}

.pws-work-note {
	margin: clamp(26px, 2.2vw, 40px) 0 0;
	font-size: clamp(15px, .95vw, 17.5px);
	color: var(--pws-grey-caption);
}

@media (max-width: 1024px) {
	.pws-work-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pws-work-next {
		grid-column: 1 / -1;
		min-height: 0;
	}
}

@media (max-width: 640px) {
	.pws-work-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pws-work--wide {
		grid-column: auto;
	}

	.pws-work--wide .pws-work__media {
		aspect-ratio: 16 / 10;
	}
}

/* Two columns: an odd project out (set by main.js) takes the full row as a wide card. */
@media (min-width: 641px) and (max-width: 1024px) {
	.pws-work.is-fill {
		grid-column: 1 / -1;
	}

	.pws-work.is-fill .pws-work__media {
		aspect-ratio: 2.35 / 1;
	}
}

.pws-lightbox {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 3vw, 50px);
	background: rgba(8, 8, 7, .94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity .3s ease;
}

.pws-lightbox.is-open {
	opacity: 1;
}

.pws-lightbox__inner {
	position: relative;
	width: min(1280px, 94vw);
	max-width: 100%;
}

.pws-lightbox__img {
	display: block;
	width: 100%;
	max-height: 72vh;
	object-fit: contain;
	border-radius: 12px;
	background: #0E0E0C;
}

.pws-lightbox__bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-top: clamp(18px, 1.5vw, 26px);
	color: var(--pws-paper);
}

.pws-lightbox__tag {
	margin: 0 0 8px;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pws-primary);
}

.pws-lightbox__name {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(20px, 1.5vw, 28px);
	letter-spacing: -.03em;
}

.pws-lightbox__text {
	margin: 0;
	max-width: 48em;
	font-size: clamp(15px, .95vw, 17.5px);
	line-height: 1.6;
	color: rgba(var(--pws-paper-rgb), .68);
}

.pws-lightbox__controls {
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
}

.pws-lightbox__count {
	font-size: 13px;
	color: rgba(var(--pws-paper-rgb), .6);
	white-space: nowrap;
}

.pws-lightbox__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(var(--pws-paper-rgb), .28);
	background: transparent;
	color: var(--pws-paper);
	font-size: 16px;
	cursor: pointer;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.pws-lightbox__nav:hover {
	background: var(--pws-primary);
	border-color: var(--pws-primary);
	color: var(--pws-on-primary);
}

.pws-lightbox__close {
	position: absolute;
	top: -14px;
	right: -14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pws-paper);
	color: var(--pws-ink);
	font-size: 17px;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}

.pws-lightbox__close:hover {
	background: var(--pws-primary);
	color: var(--pws-on-primary);
}

@media (max-width: 760px) {
	.pws-lightbox__inner {
		width: 100%;
	}

	.pws-lightbox__img {
		max-height: 60vh;
	}

	.pws-lightbox__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.pws-lightbox__controls {
		justify-content: space-between;
	}

	.pws-lightbox__count {
		margin-right: auto;
	}

	.pws-lightbox__close {
		top: 10px;
		right: 10px;
	}
}

/* ==========================================================================
   11. Packages
   ========================================================================== */

.pws-pkg-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.3vw, 24px);
}

.pws-pkg {
	--btn-hover-bg: var(--pws-ink);
	--btn-hover-fg: var(--pws-paper);
	--muted: var(--pws-body);
	--rule: rgba(var(--pws-ink-rgb), .14);
	--pkg-bg: var(--pws-bg);
	--track: rgba(var(--pws-ink-rgb), .08);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2vw, 36px);
	border-radius: 8px;
	background: var(--pkg-bg);
	color: var(--pws-ink);
	border: 1px solid rgba(var(--pws-ink-rgb), .16);
	transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}

.pws-pkg:hover {
	box-shadow: 0 24px 50px rgba(var(--pws-ink-rgb), .13);
}

/* Dark state: on hover or keyboard focus, or always with "Always dark". */
.pws-pkg--featured,
.pws-pkg:hover,
.pws-pkg:focus-within {
	--btn-hover-bg: var(--pws-paper);
	--btn-hover-fg: var(--pws-ink);
	--muted: rgba(var(--pws-paper-rgb), .6);
	--rule: rgba(var(--pws-paper-rgb), .18);
	--pkg-bg: var(--pws-ink);
	--track: rgba(var(--pws-paper-rgb), .14);
	color: var(--pws-paper);
	border-color: var(--pws-ink);
}

/* Big faint number behind each card, as on the service cards. */
.pws-pkg__index {
	position: absolute;
	z-index: -1;
	top: clamp(-14px, -1vw, -8px);
	right: clamp(10px, 1.2vw, 22px);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(58px, 4.8vw, 92px);
	line-height: 1;
	letter-spacing: -.05em;
	color: rgba(var(--pws-ink-rgb), .05);
	pointer-events: none;
	transition: color .4s ease;
}

.pws-pkg--featured .pws-pkg__index,
.pws-pkg:hover .pws-pkg__index,
.pws-pkg:focus-within .pws-pkg__index {
	color: rgba(var(--pws-paper-rgb), .08);
}

.pws-pkg__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 28px;
}

.pws-pkg__name {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(18px, 1.25vw, 23px);
	letter-spacing: -.025em;
}

.pws-pkg__badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--pws-primary);
	color: var(--pws-on-primary);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
}

.pws-pkg__for {
	margin: 9px 0 0;
	font-size: clamp(14px, .95vw, 16px);
	line-height: 1.55;
	color: var(--muted);
}

.pws-pkg__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-top: clamp(20px, 1.6vw, 30px);
}

.pws-pkg__amount {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(32px, 2.6vw, 46px);
	line-height: 1;
	letter-spacing: -.05em;
}

.pws-pkg__muted {
	font-size: 13px;
	color: var(--muted);
}

.pws-pkg__delivery {
	margin: 10px 0 0;
	font-size: 14.5px;
	color: var(--muted);
}

.pws-pkg__features {
	position: relative;
	margin: clamp(20px, 1.7vw, 30px) 0 clamp(24px, 2vw, 34px);
	padding-top: clamp(20px, 1.7vw, 30px);
	border-top: 1px solid var(--rule);
}

/* Fixed-height list: long ones scroll, so every card keeps the same height. */
.pws-pkg__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: clamp(250px, 20vw, 300px);
	padding-right: 14px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--pws-primary) var(--track);
}

.pws-pkg__list > * {
	flex: none;
}

.pws-pkg__list::-webkit-scrollbar {
	width: 4px;
}

.pws-pkg__list::-webkit-scrollbar-track {
	border-radius: 4px;
	background: var(--track);
}

.pws-pkg__list::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: var(--pws-primary);
}

.pws-pkg__list:focus-visible {
	outline: 2px solid var(--pws-primary);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Fade at the bottom while there is more to scroll. */
.pws-pkg__features::after {
	content: '';
	position: absolute;
	right: 14px;
	bottom: 0;
	left: 0;
	height: 44px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--pkg-bg));
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.pws-pkg__features.is-scrollable:not(.is-end)::after {
	opacity: 1;
}

.pws-pkg__btn {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 10px 12px 22px;
	border-radius: 999px;
	border: 1px solid rgba(var(--pws-ink-rgb), .22);
	background: transparent;
	color: var(--pws-ink);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.pws-pkg--featured .pws-pkg__btn,
.pws-pkg:hover .pws-pkg__btn,
.pws-pkg:focus-within .pws-pkg__btn {
	border-color: var(--pws-primary);
	background: var(--pws-primary);
	color: var(--pws-on-primary);
}

.pws-pkg .pws-pkg__btn:hover {
	border-color: var(--btn-hover-bg);
	background: var(--btn-hover-bg);
	color: var(--btn-hover-fg);
}

.pws-pkg__dot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--pws-primary);
	color: var(--pws-on-primary);
	font-size: 12px;
}

.pws-pkg--featured .pws-pkg__dot,
.pws-pkg:hover .pws-pkg__dot,
.pws-pkg:focus-within .pws-pkg__dot {
	background: var(--pws-on-primary);
	color: var(--pws-primary);
}

@media (max-width: 1100px) {
	.pws-pkg-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.pws-pkg-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Pricing tabs (Logo, Website, ...) and "Show all" feature lists. */

.pws-chips--tabs {
	justify-content: center;
	margin-bottom: clamp(26px, 2.2vw, 40px);
}

.pws-chips--tabs .pws-chip {
	padding: 10px 18px;
	font-size: 13.5px;
	border-color: rgba(var(--pws-ink-rgb), .2);
}

.pws-chips--tabs .pws-chip:hover,
.pws-chips--tabs .pws-chip.is-active {
	border-color: var(--pws-ink);
}

.pws-chips--tabs .pws-chip:focus-visible {
	outline: 2px solid var(--pws-primary);
	outline-offset: 3px;
}

.js .pws-pkg-panel:not(.is-active) {
	display: none;
}

.pws-pkg-panel__title {
	display: none;
}

.no-js .pws-chips--tabs {
	display: none;
}

.no-js .pws-pkg-panel__title {
	display: block;
	margin: 0 0 16px;
	color: var(--pws-grey-caption);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.no-js .pws-pkg-panel + .pws-pkg-panel {
	margin-top: clamp(40px, 4vw, 64px);
}

.pws-pkg-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pws-pkg-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pws-pkg-grid--1 {
	grid-template-columns: minmax(0, 460px);
}

@media (max-width: 1100px) {
	.pws-pkg-grid--3,
	.pws-pkg-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Two columns: an odd last card sits centred on its own row. */
@media (min-width: 641px) and (max-width: 1100px) {
	.pws-pkg-grid--3 > .pws-pkg:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - clamp(14px, 1.3vw, 24px)) / 2);
	}
}

@media (max-width: 640px) {
	.pws-pkg-grid--1,
	.pws-pkg-grid--2,
	.pws-pkg-grid--3,
	.pws-pkg-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   12. FAQ accordion
   ========================================================================== */

.pws-faq {
	display: grid;
	grid-template-columns: clamp(280px, 24vw, 460px) minmax(0, 1fr);
	gap: clamp(40px, 5vw, 110px);
}

.pws-faq--home {
	grid-template-columns: clamp(300px, 26vw, 500px) minmax(0, 1fr);
	gap: clamp(56px, 6.25vw, 120px);
}

.pws-faq--contact {
	grid-template-columns: clamp(260px, 22vw, 420px) minmax(0, 1fr);
	gap: clamp(36px, 4.5vw, 100px);
}

.pws-faq__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(30px, 2.4vw, 46px);
	line-height: .98;
	letter-spacing: -.04em;
	text-transform: uppercase;
}

.pws-faq--home .pws-eyebrow {
	margin-bottom: 16px;
}

.pws-faq--home .pws-faq__title {
	margin-bottom: 18px;
	font-size: clamp(34px, 2.7vw, 52px);
	line-height: .96;
}

.pws-faq__text {
	margin: 0;
	max-width: 24em;
	font-size: clamp(15.5px, .95vw, 18px);
	line-height: 1.68;
	color: var(--pws-body);
}

.pws-faq__list {
	border-top: 1px solid rgba(var(--pws-ink-rgb), .16);
}

.pws-faq__item {
	padding: clamp(21px, 1.55vw, 29px) 4px;
	border-bottom: 1px solid rgba(var(--pws-ink-rgb), .16);
	cursor: pointer;
	transition: background .3s ease;
}

.pws-faq--contact .pws-faq__item {
	padding: clamp(22px, 1.7vw, 32px) 4px;
}

.pws-faq__item:hover {
	background: rgba(var(--pws-ink-rgb), .03);
}

.pws-faq__q {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.pws-faq__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pws-faq__q-text {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(18px, 1.3vw, 25px);
	letter-spacing: -.028em;
	line-height: 1.2;
	color: var(--pws-ink);
}

.pws-faq--home .pws-faq__q-text {
	font-weight: 500;
	font-size: clamp(19px, 1.35vw, 26px);
}

.pws-faq__sign {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: transparent;
	color: var(--pws-ink);
	font-size: 16px;
	transition: all .3s ease;
}

.pws-faq__item.is-open .pws-faq__sign {
	background: var(--pws-primary);
	color: var(--pws-on-primary);
}

.pws-faq__panel {
	overflow: hidden;
	transition: max-height .45s ease, opacity .35s ease;
}

.js .pws-faq__panel {
	max-height: 0;
	opacity: 0;
}

.js .pws-faq__item.is-open .pws-faq__panel {
	max-height: 40em;
	opacity: 1;
}

.pws-faq__a {
	margin: 14px 0 2px;
	max-width: 44em;
	font-size: clamp(16px, 1vw, 18.5px);
	line-height: 1.7;
	color: var(--pws-body);
}

@media (max-width: 900px) {
	.pws-faq,
	.pws-faq--home,
	.pws-faq--contact {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

/* ==========================================================================
   13. Steps and CTA band
   ========================================================================== */

.pws-process__title {
	margin-bottom: clamp(40px, 3.2vw, 62px);
}

.pws-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(24px, 1.8vw, 36px);
}

.pws-step {
	border-top: 2px solid var(--pws-ink);
}

.pws-step__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pws-step__k {
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--pws-grey-caption);
}

.pws-step__dot {
	border-radius: 50%;
	background: var(--pws-primary);
}

.pws-step__title {
	margin: 0 0 12px;
	font-family: var(--font-display);
	letter-spacing: -.03em;
}

.pws-step__text {
	margin: 0;
	font-size: clamp(15px, .92vw, 17.5px);
	color: var(--pws-body);
}

.pws-steps--home .pws-step {
	padding: 26px 0 0;
}

.pws-steps--home .pws-step__top {
	margin-bottom: 20px;
}

.pws-steps--home .pws-step__dot {
	width: 8px;
	height: 8px;
}

.pws-steps--home .pws-step__title {
	font-weight: 600;
	font-size: clamp(21px, 1.55vw, 29px);
}

.pws-steps--home .pws-step__text {
	max-width: 24em;
	line-height: 1.68;
}

.pws-steps--page .pws-step {
	padding: clamp(22px, 1.7vw, 30px) 0 0;
}

.pws-steps--page .pws-step__top {
	margin-bottom: 18px;
}

.pws-steps--page .pws-step__dot {
	width: 9px;
	height: 9px;
}

.pws-steps--page .pws-step__title {
	font-weight: 700;
	font-size: clamp(18px, 1.25vw, 23px);
}

.pws-steps--page .pws-step__text {
	line-height: 1.65;
}

@media (max-width: 1024px) {
	.pws-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 44px;
	}
}

@media (max-width: 560px) {
	.pws-steps {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 36px;
	}
}

.pws-ctaband {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(26px, 3vw, 60px);
	padding: clamp(34px, 3.4vw, 68px);
	border-radius: 14px;
	background: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-ctaband__title {
	margin: 0 0 14px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(24px, 2.1vw, 40px);
	line-height: 1.05;
	letter-spacing: -.04em;
}

.pws-ctaband__text {
	margin: 0;
	max-width: 34em;
	font-size: clamp(16px, 1.05vw, 20px);
	line-height: 1.65;
	color: rgba(var(--pws-paper-rgb), .66);
}

@media (max-width: 860px) {
	.pws-ctaband {
		grid-template-columns: minmax(0, 1fr);
		padding: 34px 28px;
	}
}

@media (max-width: 420px) {
	.pws-ctaband {
		padding: 30px 22px;
	}

	.pws-ctaband .pws-btn-row .pws-btn {
		width: 100%;
		justify-content: space-between;
	}

	.pws-ctaband .pws-btn-row .pws-btn--outline-light {
		justify-content: center;
	}
}

/* ==========================================================================
   14. Contact form (dark on the homepage, light on the Contact page)
   ========================================================================== */

.pws-form__pkg {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
	padding: 12px 18px;
	border-radius: 999px;
	font-size: 13.5px;
}

.pws-form__pkg-tick {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pws-primary);
	color: var(--pws-on-primary);
	font-size: 9px;
}

.pws-form__pkg-name {
	font-weight: 600;
}

.pws-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.pws-form__row--next {
	margin-top: 20px;
}

.pws-field {
	display: block;
	min-width: 0;
}

.pws-field__label {
	display: block;
	margin-bottom: 8px;
	padding: 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
}

.pws-field__optional {
	font-weight: 400;
}

.pws-input {
	display: block;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(14, 14, 12, .16);
	border-radius: 10px;
	background: #FFFFFF;
	color: #0E0E0C;
	font-family: inherit;
	font-size: 15.5px;
	line-height: 1.5;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .25s ease, box-shadow .25s ease;
}

.pws-input:focus {
	border-color: var(--pws-primary);
	box-shadow: 0 0 0 3px rgba(var(--pws-primary-rgb), .16);
}

.pws-input::placeholder {
	color: #9AA29D;
	opacity: 1;
}

.pws-input--area {
	/* Inline-block as in the original, which keeps its descender gap below. */
	display: inline-block;
	min-height: 140px;
	resize: vertical;
}

.pws-input.is-invalid {
	border-color: var(--pws-error);
	box-shadow: 0 0 0 3px rgba(217, 63, 68, .16);
}

.pws-input--select {
	padding-right: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230E0E0C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 18px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	text-overflow: ellipsis;
	cursor: pointer;
}

.pws-input--select:has(> option[value=""]:checked) {
	color: #9AA29D;
}

.pws-input--select option,
.pws-input--select optgroup {
	color: #0E0E0C;
}

.pws-form__group {
	min-width: 0;
	margin: 26px 0 0;
	padding: 0;
	border: 0;
}

.pws-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.pws-choice {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.pws-choice__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.pws-choice__label {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid;
	font-size: 13.5px;
	font-weight: 500;
	line-height: normal;
	transition: all .22s ease;
}

.pws-choice__input:focus-visible + .pws-choice__label {
	outline: 2px solid var(--pws-primary);
	outline-offset: 3px;
}

.pws-form__brief {
	margin-top: 26px;
}

.pws-form__submit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin-top: 28px;
	padding: 15px 10px 15px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--pws-primary);
	color: var(--pws-on-primary);
	font-size: 15.5px;
	font-weight: 600;
	line-height: normal;
	text-align: left;
	cursor: pointer;
	transition: background .3s ease, color .3s ease, transform .3s ease;
}

.pws-form__submit:hover {
	transform: translateY(-2px);
}

.pws-form__submit:disabled {
	cursor: progress;
	opacity: .85;
	transform: none;
}

.pws-form__submit-dot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--pws-on-primary);
	color: var(--pws-primary);
	font-size: 13px;
}

.pws-form__note {
	margin: 14px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
}

/* Spam trap: invisible to people, still in the form for bots. */
.pws-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Dark variant (homepage). */
.pws-form--dark .pws-form__pkg {
	background: rgba(var(--pws-primary-rgb), .14);
	border: 1px solid rgba(var(--pws-primary-rgb), .35);
	color: rgba(var(--pws-paper-rgb), .82);
}

.pws-form--dark .pws-form__pkg-name {
	color: var(--pws-primary);
}

.pws-form--dark .pws-field__label {
	color: rgba(var(--pws-paper-rgb), .62);
}

.pws-form--dark .pws-field__optional {
	color: rgba(var(--pws-paper-rgb), .38);
}

.pws-form--dark .pws-choice__label {
	border-color: rgba(var(--pws-paper-rgb), .28);
	color: rgba(var(--pws-paper-rgb), .78);
}

.pws-form--dark .pws-choice__input:checked + .pws-choice__label {
	border-color: var(--pws-primary);
	background: rgba(var(--pws-primary-rgb), .16);
	color: var(--pws-mint);
}

.pws-form--dark .pws-form__submit:hover {
	background: var(--pws-paper);
	color: var(--pws-ink);
}

.pws-form--dark .pws-form__note {
	color: rgba(var(--pws-paper-rgb), .6);
}

.pws-form--dark .pws-form__note.is-error {
	color: #FF9A9E;
}

/* Light variant (Contact page). */
.pws-form--light .pws-form__pkg {
	background: var(--pws-tint);
	border: 1px solid rgba(var(--pws-primary-rgb), .35);
	color: var(--pws-ink);
}

.pws-form--light .pws-form__pkg-name {
	color: var(--pws-primary-dark);
}

.pws-form--light .pws-field__label {
	color: var(--pws-body);
}

.pws-form--light .pws-field__optional {
	color: #9AA29D;
}

.pws-form--light .pws-choice__label {
	border-color: rgba(var(--pws-ink-rgb), .18);
	color: var(--pws-grey-list);
}

.pws-form--light .pws-choice__input:checked + .pws-choice__label {
	border-color: var(--pws-primary);
	background: var(--pws-tint);
	color: var(--pws-primary-dark);
}

.pws-form--light .pws-form__submit:hover {
	background: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-form--light .pws-form__note {
	color: var(--pws-grey-caption);
}

.pws-form--light .pws-form__note.is-error {
	color: var(--pws-error);
}

@media (max-width: 560px) {
	.pws-form__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.pws-form__pkg {
		border-radius: 14px;
	}
}

/* ==========================================================================
   15. Numbers (bento grid)
   ========================================================================== */

.pws-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: clamp(264px, 18.6vw, 334px);
	gap: clamp(16px, 1.4vw, 26px);
}

.pws-bento__card {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(20px, 1.5vw, 28px);
	border-radius: 8px;
}

.pws-bento__card--sites {
	position: relative;
	overflow: hidden;
	grid-column: span 6;
	grid-row: span 2;
	padding: clamp(26px, 2.3vw, 44px);
	background: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-bento__card--green {
	background: var(--pws-primary);
	color: var(--pws-on-primary);
}

.pws-bento__card--soft {
	background: var(--pws-surface);
}

.pws-bento__card--years {
	background: var(--pws-secondary);
	color: var(--pws-paper);
}

.pws-bento__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(80% 60% at 100% 0%, rgba(var(--pws-primary-rgb), .16), transparent 70%);
	pointer-events: none;
}

.pws-bento__row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.pws-bento__label {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pws-grey-label);
}

.pws-bento__label.is-accent {
	color: var(--pws-primary);
}

.pws-bento__card--green .pws-bento__label {
	color: rgba(var(--pws-on-primary-rgb), .66);
}

.pws-bento__card--years .pws-bento__label {
	color: #86A58F;
}

.pws-bento__range {
	color: rgba(var(--pws-paper-rgb), .5);
}

.pws-bento__big {
	position: relative;
	display: flex;
	align-items: flex-start;
	margin-top: clamp(18px, 1.6vw, 30px);
}

.pws-bento__big-num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(90px, 8vw, 150px);
	line-height: .82;
	letter-spacing: -.06em;
}

.pws-bento__big-suffix {
	margin-left: .06em;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(38px, 3.2vw, 62px);
	line-height: 1;
	color: var(--pws-primary);
}

.pws-bento__text {
	position: relative;
	margin: clamp(16px, 1.3vw, 24px) 0 0;
	max-width: 26em;
	font-size: clamp(15px, .95vw, 17.5px);
	line-height: 1.65;
	color: rgba(var(--pws-paper-rgb), .66);
}

.pws-bento__chart {
	position: relative;
	margin-top: auto;
	padding-top: 22px;
}

.pws-waffle {
	display: grid;
	grid-template-columns: repeat(24, minmax(0, 1fr));
	gap: clamp(3px, .3vw, 6px);
}

.pws-waffle span {
	display: block;
	aspect-ratio: 1;
	border-radius: 2px;
}

.pws-waffle__key {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 18px;
	font-size: 12.5px;
	color: rgba(var(--pws-paper-rgb), .74);
}

.pws-waffle__key-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pws-waffle__swatch {
	width: 9px;
	height: 9px;
	border-radius: 2px;
}

.pws-waffle__count {
	color: rgba(var(--pws-paper-rgb), .42);
}

.pws-bento__value {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: clamp(10px, .9vw, 16px);
}

.pws-bento__value--auto {
	gap: 0;
	margin-top: auto;
}

.pws-bento__num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(52px, 4.3vw, 82px);
	line-height: .9;
	letter-spacing: -.055em;
}

.pws-bento__pct {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(30px, 2.3vw, 44px);
	letter-spacing: -.03em;
}

.pws-bento__unit {
	font-size: 15px;
	font-weight: 600;
	color: var(--pws-body);
}

.pws-bento__unit.is-accent {
	color: var(--pws-primary);
}

.pws-ticks {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: clamp(22px, 1.7vw, 32px);
	margin-top: clamp(14px, 1.2vw, 22px);
}

.pws-ticks span {
	flex: 1;
	height: 100%;
	border-radius: 1px;
	background: var(--pws-on-primary);
}

.pws-ticks span.is-off {
	background: rgba(var(--pws-on-primary-rgb), .18);
}

.pws-bento__note {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(var(--pws-on-primary-rgb), .78);
}

.pws-gantt {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
	padding-top: 14px;
	font-size: 11px;
	color: var(--pws-grey-label);
}

.pws-gantt__row,
.pws-gantt__weeks {
	display: grid;
	grid-template-columns: 52px repeat(5, minmax(0, 1fr));
	align-items: center;
}

.pws-gantt__row span[data-g] {
	height: 9px;
	border-radius: 99px;
	background: var(--pws-ink);
}

.pws-gantt__row span.is-accent {
	background: var(--pws-primary);
}

.pws-gantt__weeks {
	margin-top: 3px;
	color: var(--pws-grey-caption);
}

.pws-segments {
	display: flex;
	gap: 3px;
	height: 12px;
	margin-top: auto;
}

.pws-segments span {
	flex: 1;
	border-radius: 2px;
	background: rgba(var(--pws-ink-rgb), .8);
}

.pws-segments span.is-accent {
	background: var(--pws-primary);
}

.pws-bento__captions {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	font-size: 11.5px;
	color: var(--pws-grey-label);
}

.pws-bento__card--years .pws-bento__captions {
	color: rgba(var(--pws-paper-rgb), .55);
}

.pws-bento__captions .is-accent {
	color: var(--pws-primary);
}

.pws-bars {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 36px;
	margin-top: auto;
}

.pws-bars span {
	width: 3px;
	border-radius: 2px;
	background: rgba(var(--pws-paper-rgb), .45);
}

.pws-bars span.is-accent {
	background: var(--pws-primary);
}

@media (max-width: 1100px) {
	.pws-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}

	.pws-bento__card {
		grid-column: span 1;
		min-height: 250px;
	}

	.pws-bento__card--sites {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 0;
	}

	.pws-bento__card--sites .pws-bento__chart {
		margin-top: 28px;
	}
}

@media (max-width: 600px) {
	.pws-bento {
		grid-template-columns: minmax(0, 1fr);
	}

	.pws-bento__card {
		min-height: 220px;
	}

	.pws-bento__captions {
		font-size: 11px;
	}

	.pws-waffle {
		gap: 2px;
	}
}

/* ==========================================================================
   16. Why us, marquee and the craft
   ========================================================================== */

.pws-marquee {
	margin-top: 86px;
	padding: 22px 0;
	border-top: 1px solid rgba(var(--pws-ink-rgb), .12);
	border-bottom: 1px solid rgba(var(--pws-ink-rgb), .12);
	overflow: hidden;
}

.pws-marquee__track {
	display: flex;
	width: max-content;
	animation: mq 34s linear infinite;
}

.pws-marquee__group {
	display: flex;
	align-items: center;
	gap: 30px;
	padding-right: 30px;
}

.pws-marquee__item {
	font-family: var(--font-display);
	font-size: clamp(27px, 2.15vw, 42px);
	font-weight: 500;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--pws-ink);
	white-space: nowrap;
}

.pws-marquee__item.is-accent {
	color: var(--pws-primary);
}

@media (max-width: 600px) {
	.pws-marquee {
		margin-top: 56px;
		padding: 16px 0;
	}
}

.pws-reasons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 1.4vw, 26px);
}

.pws-reasons--no-media {
	grid-template-columns: minmax(0, 1fr);
}

.pws-reasons__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 1.4vw, 26px);
}

.pws-reason {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 1.9vw, 34px);
	border-radius: 12px;
	border: 1px solid rgba(var(--pws-ink-rgb), .13);
	background: var(--pws-bg);
	color: var(--pws-ink);
	transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease, color .4s ease;
}

.pws-reason:hover {
	border-color: rgba(var(--pws-primary-rgb), .5);
	box-shadow: 0 22px 46px rgba(var(--pws-ink-rgb), .1);
}

.pws-reason--dark {
	background: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-reason__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: clamp(18px, 1.4vw, 26px);
	border-radius: 12px;
	background: var(--pws-tint);
	color: var(--pws-primary);
}

.pws-reason--dark .pws-reason__icon {
	background: rgba(var(--pws-primary-rgb), .16);
}

.pws-reason__icon svg {
	width: 22px;
	height: 22px;
}

.pws-reason__title {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 1.3vw, 25px);
	letter-spacing: -.03em;
	line-height: 1.2;
}

.pws-reason__text {
	margin: 0;
	font-size: clamp(15px, .92vw, 17.5px);
	line-height: 1.6;
	color: var(--pws-body);
}

.pws-reason--dark .pws-reason__text {
	color: rgba(var(--pws-paper-rgb), .66);
}

.pws-reasons__media {
	position: relative;
	overflow: hidden;
	min-height: clamp(280px, 24vw, 460px);
	border-radius: 12px;
	background: var(--pws-surface);
}

.pws-reasons__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pws-reasons__caption {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding: clamp(22px, 1.8vw, 34px);
	background: linear-gradient(to top, rgba(8, 8, 7, .88), rgba(8, 8, 7, 0));
	color: #F2EFE9;
}

.pws-reasons__eyebrow {
	margin: 0 0 6px;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pws-primary);
}

.pws-reasons__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(19px, 1.4vw, 26px);
	letter-spacing: -.03em;
}

.pws-reasons__arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--pws-primary);
	color: var(--pws-on-primary);
	font-size: 15px;
	transition: background .3s ease, color .3s ease;
}

.pws-reasons__arrow:hover {
	background: var(--pws-paper);
	color: var(--pws-ink);
}

@media (max-width: 1024px) {
	.pws-reasons {
		grid-template-columns: minmax(0, 1fr);
	}

	.pws-reasons__media {
		min-height: clamp(300px, 56vw, 480px);
	}
}

@media (max-width: 560px) {
	.pws-reasons__cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pws-craft {
	position: relative;
	margin-top: var(--sec);
	padding: var(--sec) var(--pad);
	overflow: hidden;
	background: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-craft__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(55% 60% at 88% 0%, rgba(var(--pws-primary-rgb), .13), transparent 70%);
	pointer-events: none;
}

.pws-head--craft {
	position: relative;
	grid-template-columns: minmax(0, 1fr) minmax(0, 29em);
	margin-bottom: clamp(40px, 3.4vw, 66px);
}

.pws-head--craft .pws-eyebrow {
	color: var(--pws-primary);
}

.pws-head--craft .pws-head__text {
	color: rgba(var(--pws-paper-rgb), .66);
}

.pws-craft__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.3vw, 24px);
}

.pws-craft__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 8px;
	background: #151513;
	border: 1px solid rgba(242, 239, 233, .1);
	transition: border-color .4s ease;
}

.pws-craft__card:hover {
	border-color: rgba(var(--pws-primary-rgb), .55);
}

.pws-craft__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 1.6vw, 30px);
}

.pws-craft__meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(242, 239, 233, .42);
}

.pws-craft__title {
	margin: clamp(14px, 1.2vw, 22px) 0 10px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(19px, 1.35vw, 26px);
	line-height: 1.1;
	letter-spacing: -.03em;
}

.pws-craft__text {
	margin: 0 0 22px;
	font-size: clamp(14.5px, .88vw, 17px);
	line-height: 1.65;
	color: rgba(242, 239, 233, .6);
}

.pws-craft__tag {
	margin-top: auto;
	align-self: flex-start;
	max-width: 100%;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(242, 239, 233, .16);
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: rgba(242, 239, 233, .75);
	overflow-wrap: anywhere;
}

/* Craft specimens (decorative animations). */
.pws-spec {
	position: relative;
	aspect-ratio: 1 / .8;
	overflow: hidden;
	border-bottom: 1px solid rgba(242, 239, 233, .08);
}

.pws-spec--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.pws-spec--speed {
	gap: clamp(12px, 1.1vw, 20px);
}

.pws-spec-grid {
	position: absolute;
	inset: 13% 12%;
}

.pws-spec-grid__cols {
	position: absolute;
	inset: 0;
	border-right: 1px solid rgba(var(--pws-primary-rgb), .26);
	background: linear-gradient(90deg, rgba(var(--pws-primary-rgb), .26) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%;
}

.pws-spec-grid__bar {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 7%;
	border-radius: 3px;
	background: rgba(242, 239, 233, .16);
}

.pws-spec-grid__text {
	position: absolute;
	top: 17%;
	left: 0%;
	width: 41.667%;
	height: 36%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 9%;
	padding-right: 4%;
	animation: pwsSnapA 6s cubic-bezier(.7, 0, .2, 1) infinite;
}

.pws-spec-grid__text span {
	display: block;
	border-radius: 2px;
	background: #F2EFE9;
}

.pws-spec-grid__text span:nth-child(1) { height: 15%; width: 100%; }
.pws-spec-grid__text span:nth-child(2) { height: 15%; width: 78%; }
.pws-spec-grid__text span:nth-child(3) { height: 8%; width: 60%; background: rgba(242, 239, 233, .35); }
.pws-spec-grid__text span:nth-child(4) { height: 13%; width: 36%; border-radius: 99px; background: var(--pws-primary); }

.pws-spec-grid__img {
	position: absolute;
	top: 17%;
	left: 58.333%;
	width: 41.667%;
	height: 36%;
	border-radius: 4px;
	background: linear-gradient(145deg, var(--pws-primary), #0F7A40);
	animation: pwsSnapB 6s cubic-bezier(.7, 0, .2, 1) infinite;
}

.pws-spec-grid__card {
	position: absolute;
	top: 62%;
	bottom: 0;
	width: calc(33.333% - 5px);
	border-radius: 3px;
	border: 1px solid rgba(242, 239, 233, .16);
	background: rgba(242, 239, 233, .05);
}

.pws-spec-grid__card--1 { left: 0; }
.pws-spec-grid__card--2 { left: calc(33.333% + 2.5px); }
.pws-spec-grid__card--3 { right: 0; }

.pws-spec-type__glyph {
	font-family: var(--font-display);
	font-size: clamp(96px, 7.6vw, 150px);
	line-height: 1;
	letter-spacing: -.04em;
	color: #F2EFE9;
	animation: pwsWght 4s ease-in-out infinite;
}

.pws-spec-type__track {
	position: relative;
	width: 62%;
	height: 1px;
	margin-top: clamp(16px, 1.4vw, 26px);
	background: rgba(242, 239, 233, .2);
}

.pws-spec-type__track span {
	position: absolute;
	top: -5px;
	left: 0%;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	border-radius: 50%;
	background: var(--pws-primary);
	animation: pwsSlide 4s ease-in-out infinite;
}

.pws-spec-type__labels {
	display: flex;
	justify-content: space-between;
	width: 62%;
	margin-top: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: rgba(242, 239, 233, .45);
}

.pws-spec-motion {
	position: absolute;
	left: 16%;
	right: 16%;
	top: 15%;
	bottom: 24%;
}

.pws-spec-motion__axes {
	position: absolute;
	inset: 0;
	border-left: 1px solid rgba(242, 239, 233, .2);
	border-bottom: 1px solid rgba(242, 239, 233, .2);
}

.pws-spec-motion svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pws-spec-motion svg path:last-child {
	stroke: var(--pws-primary);
}

.pws-spec-motion__x {
	position: absolute;
	inset: 0;
	animation: pwsX 2.8s linear infinite;
}

.pws-spec-motion__y {
	position: absolute;
	inset: 0;
	animation: pwsY 2.8s cubic-bezier(.2, .8, .2, 1) infinite;
}

.pws-spec-motion__y span {
	position: absolute;
	left: -7px;
	bottom: -7px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #F2EFE9;
	box-shadow: 0 0 0 5px rgba(var(--pws-primary-rgb), .28);
}

.pws-spec-motion__labels {
	position: absolute;
	left: 16%;
	right: 16%;
	bottom: 10%;
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 11px;
	color: rgba(242, 239, 233, .45);
}

.pws-spec-speed__ring {
	position: relative;
	width: 44%;
	aspect-ratio: 1;
}

.pws-spec-speed__ring svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.pws-spec-speed__ring circle[data-g] {
	stroke: var(--pws-primary);
}

.pws-spec-speed__score {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.pws-spec-speed__num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(40px, 3.2vw, 62px);
	line-height: 1;
	letter-spacing: -.05em;
}

.pws-spec-speed__label {
	margin-top: 4px;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(242, 239, 233, .5);
}

.pws-spec-speed__metrics {
	display: flex;
	gap: clamp(12px, 1.1vw, 20px);
	font-family: var(--font-mono);
	font-size: 11px;
	color: rgba(242, 239, 233, .62);
}

.pws-spec-speed__metrics > span:first-child {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pws-spec-speed__blink {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pws-primary);
	animation: pwsBlink 1.6s ease-in-out infinite;
}

@media (max-width: 1100px) {
	.pws-craft__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pws-head--craft {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.pws-craft__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pws-spec {
		aspect-ratio: 1 / .66;
	}

	.pws-spec-type__glyph {
		font-size: 96px;
	}
}

/* ==========================================================================
   17. Testimonials and clients
   ========================================================================== */

.pws-quotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 1.55vw, 30px);
}

.pws-quote {
	display: flex;
	flex-direction: column;
	min-height: clamp(300px, 21vw, 400px);
	margin: 0;
	padding: clamp(32px, 2.4vw, 46px) clamp(28px, 2.1vw, 42px) clamp(28px, 2.1vw, 40px);
	border-radius: 6px;
	background: var(--pws-surface);
	color: var(--pws-ink);
}

.pws-quote--dark {
	background: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-quote__mark {
	font-family: var(--font-display);
	font-size: clamp(46px, 3.2vw, 62px);
	line-height: 1;
	color: var(--pws-primary);
}

.pws-quote__text {
	margin: 0;
}

.pws-quote__text p {
	margin: 14px 0 28px;
	font-size: clamp(17px, 1.18vw, 22px);
	line-height: 1.6;
	letter-spacing: -.01em;
}

.pws-quote__by {
	display: flex;
	flex-direction: column;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid rgba(var(--pws-ink-rgb), .18);
}

.pws-quote--dark .pws-quote__by {
	border-top-color: rgba(var(--pws-paper-rgb), .2);
}

.pws-quote__name {
	font-size: 15px;
	font-weight: 600;
}

.pws-quote__role {
	margin-top: 4px;
	font-size: 14px;
	opacity: .65;
}

@media (max-width: 1024px) {
	.pws-quotes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pws-quote:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 700px) {
	.pws-quotes {
		grid-template-columns: minmax(0, 1fr);
	}

	.pws-quote {
		min-height: 0;
	}
}

.pws-clients {
	padding: clamp(90px, 7vw, 136px) 0 0;
}

.pws-clients__eyebrow {
	margin-bottom: 30px;
	padding: 0 var(--pad);
	text-align: center;
}

.pws-clients__strip {
	overflow: hidden;
	padding: 26px 0;
	border-top: 1px solid rgba(var(--pws-ink-rgb), .12);
	border-bottom: 1px solid rgba(var(--pws-ink-rgb), .12);
}

.pws-clients__track {
	display: flex;
	width: max-content;
	animation: mqr 30s linear infinite;
}

.pws-clients__group {
	display: flex;
	align-items: center;
	gap: 64px;
	padding-right: 64px;
}

.pws-clients__name {
	font-family: var(--font-display);
	font-size: clamp(19px, 1.45vw, 27px);
	font-weight: 600;
	letter-spacing: -.02em;
	color: rgba(var(--pws-ink-rgb), .38);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.pws-clients {
		padding-top: 72px;
	}

	.pws-clients__strip {
		padding: 20px 0;
	}

	.pws-clients__group {
		gap: 40px;
		padding-right: 40px;
	}
}

/* ==========================================================================
   18. Homepage contact
   ========================================================================== */

.pws-contact {
	margin-top: var(--sec);
}

.pws-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 81fr) minmax(0, 89fr);
	column-gap: 15%;
	align-items: start;
	padding: clamp(84px, 4.9vw, 96px) var(--pad) clamp(84px, 4.7vw, 94px);
	background: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-contact__title {
	margin: 0 0 clamp(21px, 1.55vw, 29px);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(64px, 6.7vw, 130px);
	line-height: .96;
	letter-spacing: -.05em;
}

.pws-contact__highlight {
	color: var(--pws-primary);
}

.pws-contact__text {
	margin: 0 0 38px;
	max-width: 400px;
	font-size: 17.5px;
	line-height: 1.7;
	color: rgba(var(--pws-paper-rgb), .72);
}

.pws-contact__points {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pws-contact__email {
	margin-top: 48px;
	padding-top: 26px;
	border-top: 1px solid rgba(var(--pws-paper-rgb), .18);
	font-size: 15px;
}

.pws-contact__email a {
	color: rgba(var(--pws-paper-rgb), .72);
	overflow-wrap: anywhere;
	transition: color .25s ease;
}

.pws-contact__email a:hover {
	color: var(--pws-primary);
}

@media (max-width: 1024px) {
	.pws-contact__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.pws-contact__title {
		font-size: clamp(48px, 9vw, 96px);
	}

	.pws-contact__text {
		max-width: 34em;
	}

	.pws-contact__email {
		margin-top: 36px;
	}
}

@media (max-width: 480px) {
	.pws-contact__inner {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.pws-contact__title {
		font-size: clamp(40px, 12.4vw, 56px);
	}

	.pws-contact__text {
		font-size: 16px;
	}
}

/* ==========================================================================
   19. Inner pages
   ========================================================================== */

/* Services: "Always included". */
.pws-listcard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(28px, 2.3vw, 44px);
	border-radius: 12px;
	border: 1px solid rgba(var(--pws-ink-rgb), .13);
}

.pws-listcard--dark {
	border: 0;
	background: var(--pws-ink);
	color: var(--pws-paper);
}

/* Platforms: guide cards. */
.pws-guide {
	padding: clamp(26px, 2.1vw, 42px);
	border-radius: 12px;
	border: 1px solid rgba(var(--pws-ink-rgb), .13);
	transition: border-color .4s ease, box-shadow .4s ease;
}

.pws-guide:hover {
	border-color: rgba(var(--pws-primary-rgb), .5);
	box-shadow: 0 22px 46px rgba(var(--pws-ink-rgb), .1);
}

.pws-guide__top {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.pws-guide__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--pws-tint);
}

.pws-guide__icon svg {
	width: 24px;
	height: 24px;
}

.pws-guide__name {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 1.25vw, 23px);
	letter-spacing: -.03em;
}

.pws-guide__text {
	margin: 0 0 16px;
	font-size: clamp(15px, .98vw, 18px);
	line-height: 1.65;
	color: var(--pws-body);
}

.pws-guide__best {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--pws-primary-dark);
}

/* Pricing: comparison table. */
.pws-table-wrap {
	overflow-x: auto;
	border: 1px solid rgba(var(--pws-ink-rgb), .14);
	border-radius: 12px;
	-webkit-overflow-scrolling: touch;
}

.pws-table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	font-size: clamp(14px, .95vw, 16.5px);
}

.pws-table thead tr {
	background: var(--pws-surface);
}

.pws-table thead th {
	padding: 16px 22px;
	border-bottom: 1px solid rgba(var(--pws-ink-rgb), .12);
	font-family: var(--font-display);
	font-size: 15px;
	text-align: center;
}

.pws-table thead th:first-child {
	text-align: left;
}

.pws-table tbody th,
.pws-table td {
	padding: 15px 22px;
	border-bottom: 1px solid rgba(var(--pws-ink-rgb), .1);
}

.pws-table tbody tr:last-child th,
.pws-table tbody tr:last-child td {
	border-bottom: 0;
}

.pws-table tbody th {
	font-weight: 400;
	text-align: left;
	color: var(--pws-ink);
}

.pws-table td {
	text-align: center;
	color: var(--pws-grey-list);
}

.pws-table td.is-yes {
	color: var(--pws-primary-dark);
}

.pws-table td.is-no {
	color: #B9C0BB;
}

@media (max-width: 760px) {
	.pws-table {
		min-width: 640px;
	}

	.pws-table thead th,
	.pws-table tbody th,
	.pws-table td {
		padding: 13px 16px;
	}
}

/* Pricing: add-ons. */
.pws-addons {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.3vw, 24px);
}

.pws-addon {
	padding: clamp(24px, 1.9vw, 34px);
	border-radius: 10px;
	border: 1px solid rgba(var(--pws-ink-rgb), .14);
	transition: border-color .4s ease, box-shadow .4s ease;
}

.pws-addon:hover {
	border-color: rgba(var(--pws-primary-rgb), .5);
	box-shadow: 0 20px 44px rgba(var(--pws-ink-rgb), .1);
}

.pws-addon__title {
	margin: 0 0 14px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(19px, 1.35vw, 25px);
	letter-spacing: -.025em;
}

.pws-addon__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 7px;
	margin-bottom: 12px;
}

.pws-addon__amount {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(24px, 1.8vw, 32px);
	line-height: 1;
	letter-spacing: -.04em;
}

.pws-addon__unit {
	font-size: 13px;
	color: var(--pws-grey-caption);
}

.pws-addon__text {
	margin: 0;
	font-size: clamp(15px, .92vw, 17.5px);
	line-height: 1.6;
	color: var(--pws-body);
}

@media (max-width: 1024px) {
	.pws-addons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.pws-addons {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* About: who we are. */
.pws-who {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	align-items: center;
	gap: clamp(36px, 4.5vw, 90px);
}

.pws-who--text-only {
	grid-template-columns: minmax(0, 1fr);
}

.pws-who__title {
	margin: 0 0 clamp(20px, 1.5vw, 28px);
	max-width: 17em;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(26px, 2.5vw, 46px);
	line-height: 1.12;
	letter-spacing: -.035em;
	text-wrap: pretty;
}

.pws-who__text {
	margin: 0 0 18px;
	max-width: 34em;
	font-size: clamp(16px, 1.05vw, 20px);
	line-height: 1.7;
	color: var(--pws-body);
}

.pws-who__text:last-child {
	margin-bottom: 0;
}

.pws-who__img {
	display: block;
	width: 100%;
	border-radius: 12px;
	border: 1px solid rgba(var(--pws-ink-rgb), .12);
}

@media (max-width: 900px) {
	.pws-who {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* About: stats. */
.pws-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 1.6vw, 30px);
}

.pws-stat {
	padding-top: clamp(20px, 1.5vw, 26px);
	border-top: 2px solid var(--pws-ink);
}

.pws-stat__row {
	display: flex;
	align-items: baseline;
	gap: 3px;
}

.pws-stat__num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(34px, 3vw, 56px);
	line-height: 1;
	letter-spacing: -.05em;
}

.pws-stat__suffix {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(20px, 1.7vw, 32px);
	color: var(--pws-primary);
}

.pws-stat__label {
	margin: 12px 0 0;
	font-size: clamp(15px, .95vw, 17.5px);
	color: var(--pws-body);
}

@media (max-width: 900px) {
	.pws-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
	}
}

/* About: rules. */
.pws-rule {
	display: flex;
	gap: clamp(20px, 1.8vw, 32px);
	padding: clamp(26px, 2.1vw, 40px);
	border-radius: 12px;
	border: 1px solid rgba(var(--pws-ink-rgb), .13);
	transition: border-color .4s ease, box-shadow .4s ease;
}

.pws-rule:hover {
	border-color: rgba(var(--pws-primary-rgb), .5);
	box-shadow: 0 22px 46px rgba(var(--pws-ink-rgb), .1);
}

.pws-rule__num {
	flex: none;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(28px, 2.2vw, 40px);
	line-height: 1;
	letter-spacing: -.04em;
	color: rgba(var(--pws-ink-rgb), .12);
}

.pws-rule__title {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 1.3vw, 25px);
	letter-spacing: -.03em;
}

.pws-rule__text {
	margin: 0;
	font-size: clamp(15px, .98vw, 18px);
	line-height: 1.65;
	color: var(--pws-body);
}

/* About: good fit. */
.pws-fit {
	padding: clamp(28px, 2.3vw, 44px);
	border-radius: 12px;
	border: 1px solid rgba(var(--pws-ink-rgb), .13);
}

.pws-fit--dark {
	border: 0;
	background: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-fit__title {
	margin: 0 0 clamp(20px, 1.6vw, 28px);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(19px, 1.45vw, 27px);
	letter-spacing: -.03em;
}

.pws-fit__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pws-fit__note {
	margin: clamp(22px, 1.8vw, 32px) 0 0;
	font-size: clamp(15px, .95vw, 17.5px);
	line-height: 1.6;
	color: var(--pws-grey-caption);
}

/* Contact page: form + sidebar. */
.pws-contactpage {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	align-items: start;
	gap: clamp(28px, 3vw, 60px);
}

.pws-contactpage__form {
	padding: clamp(26px, 2.4vw, 46px);
	border-radius: 16px;
	border: 1px solid rgba(var(--pws-ink-rgb), .14);
	background: var(--pws-bg);
	box-shadow: 0 18px 44px rgba(var(--pws-ink-rgb), .06);
}

.pws-contactpage__side {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.2vw, 22px);
}

.pws-sidecard {
	padding: clamp(24px, 1.9vw, 34px);
	border-radius: 14px;
	border: 1px solid rgba(var(--pws-ink-rgb), .13);
}

.pws-sidecard--dark {
	border: 0;
	background: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-sidecard__eyebrow {
	margin: 0 0 10px;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pws-primary);
}

.pws-sidecard__email {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(17px, 1.15vw, 21px);
	letter-spacing: -.02em;
	color: var(--pws-paper);
	overflow-wrap: anywhere;
}

.pws-sidecard__email:hover {
	color: var(--pws-primary);
}

.pws-sidecard__text {
	margin: 14px 0 0;
	font-size: clamp(15px, .92vw, 17px);
	line-height: 1.6;
	color: rgba(var(--pws-paper-rgb), .66);
}

.pws-sidecard__title {
	margin: 0 0 12px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 1.3vw, 25px);
	letter-spacing: -.03em;
}

.pws-sidecard__list {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.pws-sidecard__muted {
	margin: 0 0 18px;
	font-size: clamp(15px, .92vw, 17px);
	line-height: 1.6;
	color: var(--pws-body);
}

@media (max-width: 1024px) {
	.pws-contactpage {
		grid-template-columns: minmax(0, 1fr);
	}

	.pws-contactpage__side {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pws-sidecard--dark {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.pws-contactpage__side {
		grid-template-columns: minmax(0, 1fr);
	}

	.pws-contactpage__form {
		padding: 22px 18px;
		border-radius: 14px;
	}
}

/* Contact page: platforms strip. */
.pws-logos {
	padding: clamp(24px, 2vw, 34px) 0;
	border-top: 1px solid rgba(var(--pws-ink-rgb), .14);
	border-bottom: 1px solid rgba(var(--pws-ink-rgb), .14);
}

.pws-logos__label {
	margin: 0 0 18px;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pws-grey-caption);
}

.pws-logos__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(22px, 2.4vw, 46px);
}

.pws-logos__row svg {
	display: block;
	width: 26px;
	height: 26px;
	color: rgba(var(--pws-ink-rgb), .42);
}

@media (max-width: 480px) {
	/* Two even rows of four instead of a wrapped orphan. */
	.pws-logos__row {
		display: grid;
		grid-template-columns: repeat(4, 26px);
		justify-content: space-between;
		row-gap: 22px;
	}
}

/* ==========================================================================
   20. Footer
   ========================================================================== */

.pws-foot {
	padding: clamp(46px, 3vw, 58px) var(--pad) clamp(20px, 1.3vw, 26px);
	background: var(--pws-secondary);
	color: var(--pws-paper);
}

.pws-foot__grid {
	display: grid;
	grid-template-columns: minmax(0, 40fr) minmax(0, 25.7fr) minmax(0, 34.3fr);
	padding-bottom: clamp(52px, 3.3vw, 64px);
}

.pws-foot__col {
	min-width: 0;
}

.pws-foot__brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--pws-paper);
}

.pws-foot__brand:hover {
	color: var(--pws-paper);
}

.pws-foot__mark {
	display: block;
	width: auto;
	height: 48px;
}

.pws-foot__logo {
	display: block;
	width: auto;
	height: 48px;
	max-width: 260px;
	object-fit: contain;
}

.pws-foot__name {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.08;
	letter-spacing: -.025em;
}

.pws-foot__tagline {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: #9DB0A3;
}

.pws-foot__contact {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: #9DB0A3;
}

.pws-foot__contact a {
	color: #E4EBE4;
}

.pws-foot__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.pws-foot__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(var(--pws-paper-rgb), .22);
	border-radius: 50%;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.pws-foot__social-link svg {
	width: 18px;
	height: 18px;
}

.pws-foot__social a,
.pws-foot__contact a:hover {
	color: #E4EBE4;
	transition: color .25s ease;
}

.pws-foot__social a:hover,
.pws-foot__social a:focus-visible {
	border-color: var(--pws-primary);
	background: var(--pws-primary);
	color: var(--pws-on-primary);
}

.pws-foot__social a:focus-visible {
	outline: 2px solid var(--pws-primary);
	outline-offset: 3px;
}

.pws-foot__label {
	margin: 0 0 20px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #86A58F;
}

.pws-foot__label--cta {
	margin-bottom: 30px;
}

.pws-foot__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pws-foot__links a {
	display: block;
	font-size: 15px;
	color: #E4EBE4;
	transition: color .25s ease;
}

.pws-foot__links a:hover {
	color: var(--pws-primary);
}

.pws-foot__talk {
	display: inline-flex;
	align-items: center;
	gap: clamp(18px, 1.3vw, 26px);
	color: var(--pws-paper);
	transition: color .3s ease;
}

.pws-foot__talk:hover {
	color: var(--pws-primary);
}

.pws-foot__talk-text {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(38px, 2.5vw, 48px);
	line-height: 1;
	letter-spacing: -.045em;
}

.pws-foot--home .pws-foot__name,
.pws-foot--home .pws-foot__talk-text {
	font-family: var(--font-display);
}

.pws-foot__talk-arrow {
	font-size: clamp(22px, 1.4vw, 28px);
	line-height: 1;
	color: var(--pws-primary);
}

.pws-foot__email-wrap {
	margin-top: clamp(8px, .55vw, 12px);
}

.pws-foot__email {
	display: inline-block;
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(var(--pws-paper-rgb), .35);
	font-size: 13px;
	font-weight: 500;
	color: #E4EBE4;
	overflow-wrap: anywhere;
	transition: color .25s ease;
}

.pws-foot__email:hover {
	color: var(--pws-primary);
}

.pws-foot__location {
	margin: 24px 0 0;
	font-size: 14px;
	color: #8FA898;
}

.pws-foot__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(var(--pws-paper-rgb), .14);
	font-size: 12px;
	color: #86A58F;
}

.pws-foot__top {
	justify-self: end;
	color: #86A58F;
	transition: color .25s ease;
}

.pws-foot__top:hover {
	color: var(--pws-primary);
}

.pws-foot__legal-wrap,
.pws-foot__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
}

.pws-foot__legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pws-foot__legal a {
	color: #86A58F;
	transition: color .25s ease;
}

.pws-foot__legal a:hover,
.pws-foot__legal .current-menu-item a {
	color: var(--pws-primary);
}

/* Floating WhatsApp button (shown once a number is set in Theme Settings). */
.pws-whatsapp {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #FFFFFF;
	box-shadow: 0 10px 28px rgba(14, 14, 12, .24);
	transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.pws-whatsapp svg {
	width: 30px;
	height: 30px;
}

.pws-whatsapp:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(14, 14, 12, .3);
}

.pws-whatsapp:focus-visible {
	outline: 3px solid var(--pws-ink);
	outline-offset: 3px;
}

.pws-whatsapp__label {
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--pws-ink);
	color: var(--pws-paper);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translate(6px, -50%);
	transition: opacity .2s ease, transform .2s ease;
}

@media (hover: hover) {
	.pws-whatsapp:hover .pws-whatsapp__label,
	.pws-whatsapp:focus-visible .pws-whatsapp__label {
		opacity: 1;
		transform: translate(0, -50%);
	}
}

.pws-menu-open .pws-whatsapp {
	opacity: 0;
	pointer-events: none;
}

/* Keep "Back to top" clear of the button. */
@media (min-width: 701px) {
	.pws-has-whatsapp .pws-foot__bar {
		padding-right: 76px;
	}
}

@media (max-width: 520px) {
	.pws-whatsapp {
		right: max(16px, env(safe-area-inset-right));
		bottom: max(16px, env(safe-area-inset-bottom));
		width: 52px;
		height: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pws-whatsapp,
	.pws-whatsapp__label {
		transition: none;
	}
}

@media (max-width: 900px) {
	.pws-foot__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 44px 32px;
	}

	.pws-foot__col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 700px) {
	.pws-foot__bar {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		gap: 8px;
	}

	.pws-foot__top {
		justify-self: start;
	}
}

@media (max-width: 520px) {
	.pws-foot__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.pws-foot__talk-text {
		font-size: clamp(34px, 10vw, 40px);
	}
}

/* ==========================================================================
   21. Blog fallbacks (index, single, page.php, 404)
   ========================================================================== */

.pws-prose {
	max-width: 760px;
	font-size: clamp(16px, 1.05vw, 19px);
	line-height: 1.75;
	color: var(--pws-body);
}

.pws-prose > *:first-child {
	margin-top: 0;
}

.pws-prose h2,
.pws-prose h3,
.pws-prose h4 {
	margin: 1.8em 0 .6em;
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.15;
	color: var(--pws-ink);
}

.pws-prose h2 {
	font-size: clamp(26px, 2vw, 36px);
}

.pws-prose h3 {
	font-size: clamp(21px, 1.5vw, 27px);
}

.pws-prose a {
	color: var(--pws-ink);
	text-decoration: underline;
	text-decoration-color: var(--pws-primary);
	text-underline-offset: 3px;
}

.pws-prose img,
.pws-prose__media img {
	border-radius: 12px;
}

.pws-prose__media {
	margin: 0 0 32px;
}

.pws-prose blockquote {
	margin: 1.6em 0;
	padding-left: 20px;
	border-left: 3px solid var(--pws-primary);
	color: var(--pws-ink);
}

.pws-prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.pws-prose th,
.pws-prose td {
	padding: 10px 14px;
	border: 1px solid rgba(var(--pws-ink-rgb), .12);
}

.pws-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.4vw, 26px);
}

.pws-post-card {
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(var(--pws-ink-rgb), .12);
	transition: border-color .4s ease, box-shadow .4s ease;
}

.pws-post-card:hover {
	border-color: rgba(var(--pws-primary-rgb), .5);
	box-shadow: 0 22px 46px rgba(var(--pws-ink-rgb), .1);
}

.pws-post-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.pws-post-card__body {
	padding: clamp(20px, 1.6vw, 32px);
}

.pws-post-card__title {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(19px, 1.35vw, 25px);
	letter-spacing: -.03em;
	line-height: 1.2;
}

.pws-post-card__text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--pws-body);
}

.pws-pagination {
	margin-top: 40px;
}

.pws-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pws-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid rgba(var(--pws-ink-rgb), .2);
	font-size: 14px;
	font-weight: 600;
}

.pws-pagination .page-numbers.current {
	background: var(--pws-ink);
	border-color: var(--pws-ink);
	color: var(--pws-paper);
}

.pws-post-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	max-width: 760px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(var(--pws-ink-rgb), .12);
	font-weight: 600;
}

.pws-lead {
	font-size: var(--fs-lead);
	color: var(--pws-body);
}

@media (max-width: 1024px) {
	.pws-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.pws-posts {
		grid-template-columns: minmax(0, 1fr);
	}
}