/*
Theme Name: Pals Alliance
Theme URI: https://pals-alliance.com/
Author: Pals Alliance
Description: One-page landing theme for Pals Alliance (IT, Workspace & Cloud). Bilingual NL/EN, WebGL "liquid cells" backgrounds, scroll-driven USP cards. All copy lives in inc/content.php.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pals-alliance
*/

/* ===========================================================================
   TABLE OF CONTENTS
   ---------------------------------------------------------------------------
    1.  Design tokens
    2.  Base
    3.  Shared bits (buttons, labels, canvas, notices)
    4.  Header
    5.  Hero
    6.  USP cards
    7.  Services
    8.  Catchphrase
    9.  FAQ
   10.  Final CTA
   11.  Footer
   12.  Contact modal + form
   13.  Responsive
   14.  Reduced motion / no JavaScript
   ========================================================================= */


/* ===========================================================================
   1. DESIGN TOKENS
   Change a value here and it applies everywhere.
   Palette and type scale follow docs/brand-book.md.
   ========================================================================= */

:root {
	/* Colour */
	--pa-black:  #0D0D0D;   /* headings, buttons, logo   */
	--pa-ink:    #1F1F1F;   /* body copy                 */
	--pa-grey:   #A6A6A6;   /* labels, meta              */
	--pa-line:   #E6E6E6;   /* borders, page background  */
	--pa-white:  #FFFFFF;   /* panels                    */

	/* Type */
	--pa-font-display: "Orbitron", "Noto Sans JP", sans-serif;
	--pa-font-body:    "Inter", "Noto Sans JP", system-ui, -apple-system, sans-serif;

	/* Shape */
	--pa-radius:    16px;   /* panels  */
	--pa-radius-sm:  4px;   /* buttons, inputs */

	/* Rhythm */
	--pa-gutter: clamp(16px, 3vw, 48px);   /* left/right page padding */
	--pa-frame:  clamp(16px, 1.5vw, 24px); /* margin around full-bleed panels */
	--pa-gap:    16px;                     /* gap between panels */

	/* Motion */
	--pa-ease: cubic-bezier(0.23, 1, 0.32, 1);
}


/* ===========================================================================
   2. BASE
   ========================================================================= */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--pa-line);
	color: var(--pa-black);
	font-family: var(--pa-font-body);
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--pa-black);
	color: var(--pa-white);
}

a {
	color: var(--pa-ink);
}

a:hover {
	color: var(--pa-black);
}

:focus-visible {
	outline: 2px solid var(--pa-black);
	outline-offset: 2px;
}

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

/* Keyboard-only shortcut past the fixed header. */
.pa-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--pa-black);
	color: var(--pa-white);
	font-size: 14px;
	text-decoration: none;
}

.pa-skip-link:focus {
	left: 16px;
	top: 16px;
	color: var(--pa-white);
}

@keyframes pa-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}


/* ===========================================================================
   3. SHARED BITS
   ========================================================================= */

/* --- WebGL background canvas (assets/js/liquid-cells.js) ---------------- */
.pa-fluid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
}

/* --- Small uppercase label above a block ------------------------------- */
.pa-label {
	margin: 0 0 20px;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: 8.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pa-grey);
}

.pa-label--spaced {
	margin: 40px 0 12px;
}

/* --- Eyebrow (slightly larger label, used in the hero) ------------------ */
.pa-eyebrow {
	margin: 0 0 32px;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pa-grey);
}

/* --- Buttons ------------------------------------------------------------
   .pa-btn            base, 36px tall
   .pa-btn--solid     black fill, white text
   .pa-btn--ghost     outlined, fills on hover
   .pa-btn--sm/--lg   32px / 48px tall
   ---------------------------------------------------------------------- */
.pa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 18px;
	border: none;
	border-radius: var(--pa-radius-sm);
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.pa-btn--solid {
	background: var(--pa-black);
	color: var(--pa-white);
}

.pa-btn--solid:hover {
	background: var(--pa-ink);
	color: var(--pa-white);
}

.pa-btn--ghost {
	background: transparent;
	border: 1px solid var(--pa-black);
	color: var(--pa-black);
}

.pa-btn--ghost:hover {
	background: var(--pa-black);
	color: var(--pa-white);
}

.pa-btn--sm {
	height: 32px;
	padding: 0 14px;
	font-size: 9.5px;
}

.pa-btn--lg {
	height: 48px;
	padding: 0 24px;
	font-size: 12px;
}

/* --- Notice (form feedback) -------------------------------------------- */
.pa-notice {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: var(--pa-radius-sm);
	font-size: 15px;
	line-height: 1.55;
}

/* site.js moves focus here after a submit so screen readers land on it;
   the message is the feedback, so it needs no focus ring of its own. */
.pa-notice:focus {
	outline: none;
}

.pa-notice--ok {
	background: var(--pa-black);
	color: var(--pa-white);
}

.pa-notice--error {
	background: var(--pa-line);
	color: var(--pa-ink);
	border-left: 3px solid var(--pa-black);
}

/* --- Entrance animation ------------------------------------------------- */
.pa-rise {
	animation: pa-rise 0.7s var(--pa-ease) both;
}

.pa-rise--1 { animation-delay:  90ms; }
.pa-rise--2 { animation-delay: 180ms; }
.pa-rise--3 { animation-delay: 270ms; }


/* ===========================================================================
   4. HEADER
   ========================================================================= */

/* Thin scroll-progress line at the very top of the window. */
.pa-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	width: 0;
	height: 2px;
	background: var(--pa-black);
}

.pa-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 40;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: clamp(16px, 2.5vw, 40px) var(--pa-gutter);
	box-sizing: border-box;
	/* The bar itself must not block the WebGL background underneath it;
	   only its children are clickable. */
	pointer-events: none;
}

.pa-header__logo,
.pa-header__nav {
	pointer-events: auto;
}

.pa-header__logo {
	display: inline-flex;
	align-items: center;
	color: var(--pa-black);
	text-decoration: none;
}

.pa-logo-lockup { display: block; }
.pa-logo-mark   { display: none; }   /* swapped in below 700px — see §13 */

.pa-header__nav {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* --- NL / EN switch ----------------------------------------------------- */
.pa-lang {
	display: flex;
	border-radius: var(--pa-radius-sm);
	overflow: hidden;
}

.pa-lang__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 30px;
	background: transparent;
	color: var(--pa-grey);
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: 9px;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.pa-lang__btn.is-active {
	background: var(--pa-black);
	color: var(--pa-white);
}

.pa-lang__btn:not(.is-active):hover {
	color: var(--pa-black);
}


/* ===========================================================================
   5. HERO
   ========================================================================= */

.pa-hero {
	position: relative;
	margin: var(--pa-frame);
	padding: 160px 24px clamp(160px, 20vh, 240px);
	min-height: calc(100vh - var(--pa-frame) * 2);
	min-height: calc(100svh - var(--pa-frame) * 2);
	background: var(--pa-white);
	border-radius: var(--pa-radius);
	overflow: hidden;
	box-sizing: border-box;
}

.pa-hero__inner {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 8px;
	text-align: center;
}

.pa-hero__title {
	margin: 0;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: clamp(28px, 4.6vw, 64px);
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pa-black);
	text-wrap: pretty;
}

.pa-hero__lead {
	max-width: 520px;
	margin: 40px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--pa-ink);
}

.pa-hero__pillars {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.pa-hero__pillars .pa-label {
	margin: 48px 0 20px;
}

.pa-pillars {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 3vw, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pa-pillar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pa-black);
}


/* ===========================================================================
   6. USP CARDS
   The section is deliberately much taller than the screen: assets/js/site.js
   turns "how far you have scrolled through it" into the card animation.
   --pa-usp-cards is printed by index.php from the number of cards in
   inc/content.php, so adding a fifth card lengthens the section by itself.
   ========================================================================= */

.pa-usp {
	position: relative;
	height: calc(100vh + var(--pa-usp-cards, 4) * 87.5vh);
	background: var(--pa-line);
}

.pa-usp__sticky {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
}

.pa-usp__head {
	position: absolute;
	z-index: 0;
	max-width: 720px;
	padding: 0 24px;
	text-align: center;
	transform: scale(0);   /* grown by site.js as the section enters */
}

.pa-usp__title {
	margin: 0;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 52px);
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pa-black);
	text-wrap: pretty;
}

.pa-usp__lead {
	max-width: 460px;
	margin: 24px auto 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--pa-ink);
}

.pa-usp__card {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	flex-direction: column;
	width: min(86vw, 412px);
	height: 520px;
	max-height: calc(100vh - 48px);
	padding: 16px;
	background: var(--pa-white);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-radius);
	box-sizing: border-box;
	/* Starting position: one screen below. site.js takes it from here. */
	transform: translate(-50%, -50%) translateY(110vh);
	will-change: transform;
}

.pa-usp__thumb {
	flex: 0 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--pa-line);
	border-radius: 8px;
	background-color: var(--pa-white);
	background-image: radial-gradient(var(--pa-line) 1px, transparent 1px);
	background-size: 12px 12px;
	overflow: hidden;
	box-sizing: border-box;
}

.pa-usp__body {
	flex: 0 0 auto;
	padding: 32px 16px 40px;
}

.pa-usp__card-title {
	margin: 0;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--pa-black);
}

.pa-usp__card-text {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--pa-ink);
}


/* ===========================================================================
   7. SERVICES
   ========================================================================= */

.pa-services {
	display: grid;
	gap: var(--pa-gap);
	margin: var(--pa-gap) var(--pa-gutter);
}

.pa-split {
	display: grid;
	grid-template-columns: 58fr 42fr;
	gap: var(--pa-gap);
}

.pa-panel {
	position: relative;
	padding: 32px;
	min-height: 440px;
	background: var(--pa-white);
	border-radius: var(--pa-radius);
	overflow: hidden;
	box-sizing: border-box;
}

.pa-panel--dark {
	padding: clamp(32px, 3vw, 48px);
	min-height: 0;
	background: var(--pa-black);
}

.pa-panel__title {
	position: relative;
	z-index: 10;
	max-width: 340px;
	margin: 0;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: clamp(24px, 2.6vw, 40px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pa-black);
	pointer-events: none;
}

.pa-panel__content {
	position: relative;
	z-index: 10;
	pointer-events: none;
}

.pa-panel__statement {
	margin: 0;
	font-size: clamp(20px, 1.9vw, 28px);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--pa-white);
	text-wrap: pretty;
}

.pa-panel__note {
	max-width: 420px;
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pa-grey);
}

/* Custom cursor dot inside the "what we do" panel. */
.pa-panel__cursor {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 20;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: var(--pa-black);
	pointer-events: none;
	display: none;   /* shown by site.js on pointer move */
}

/* Hide the system cursor only where a real pointer can see the dot. */
@media (hover: hover) and (pointer: fine) {
	[data-pa-cursor-panel] { cursor: none; }
}

.pa-services__card {
	padding: clamp(24px, 3vw, 40px);
	background: var(--pa-white);
	border-radius: var(--pa-radius);
}

.pa-services__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 40px;
}

.pa-services__title {
	margin: 0 0 8px;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pa-black);
}

.pa-services__lead {
	max-width: 460px;
	margin: 0;
	font-size: 14px;
	color: var(--pa-grey);
}

.pa-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 32px 24px;
}

.pa-service {
	color: var(--pa-black);
}

.pa-service__title {
	margin: 16px 0 8px;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pa-black);
}

.pa-service__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pa-ink);
}


/* ===========================================================================
   8. CATCHPHRASE
   ========================================================================= */

.pa-catch {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	height: 100svh;
	background: var(--pa-line);
	overflow: hidden;
}

.pa-catch__head {
	position: relative;
	z-index: 10;
	max-width: 760px;
	margin: 0;
	padding: 0 24px;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: clamp(30px, 4.4vw, 64px);
	line-height: 1.08;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pa-black);
	text-align: center;
	text-wrap: pretty;
	pointer-events: none;
}


/* ===========================================================================
   9. FAQ
   ========================================================================= */

.pa-faq {
	display: grid;
	grid-template-columns: 1fr minmax(0, 729px);
	gap: 48px;
	margin: 0 var(--pa-gutter);
	padding: clamp(96px, 10vw, 160px) 0;
}

.pa-faq__title {
	max-width: 320px;
	margin: 0;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pa-black);
}

.pa-faq__lead {
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--pa-ink);
}

.pa-faq__lead a {
	color: var(--pa-ink);
	text-decoration: underline;
	transition: color 0.07s linear;
}

.pa-faq__item {
	border-top: 1px solid var(--pa-line);
}

.pa-faq__item:last-child {
	border-bottom: 1px solid var(--pa-line);
}

.pa-faq__heading {
	margin: 0;
	font-weight: inherit;
	font-size: inherit;
}

.pa-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 24px;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--pa-black);
	text-align: left;
	cursor: pointer;
}

/* Plus sign that turns into a minus when the answer is open. */
.pa-faq__icon {
	position: relative;
	flex-shrink: 0;
	display: inline-block;
	width: 24px;
	height: 24px;
}

.pa-faq__icon::before,
.pa-faq__icon::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 11.25px;
	width: 12px;
	height: 1.5px;
	background: var(--pa-black);
}

.pa-faq__icon::after {
	transform: rotate(90deg);
	transition: transform 0.3s var(--pa-ease);
}

.pa-faq__q[aria-expanded="true"] .pa-faq__icon::after {
	transform: rotate(0deg);
}

/* 0fr → 1fr animates to the answer's natural height, whatever its length. */
.pa-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s var(--pa-ease);
}

.pa-faq__a.is-open {
	grid-template-rows: 1fr;
}

/* visibility keeps a collapsed answer out of the screen-reader tree too. */
.pa-faq__a-inner {
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s linear 0.4s;
}

.pa-faq__a.is-open .pa-faq__a-inner {
	visibility: visible;
	transition-delay: 0s;
}

.pa-faq__a p {
	max-width: 600px;
	margin: 0;
	padding: 0 24px 24px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pa-ink);
}


/* ===========================================================================
   10. FINAL CTA
   ========================================================================= */

.pa-cta {
	position: relative;
	display: flex;
	align-items: flex-end;
	margin: var(--pa-frame);
	padding: clamp(32px, 4.5vw, 72px);
	min-height: 80vh;
	background: var(--pa-white);
	border-radius: var(--pa-radius);
	overflow: hidden;
	box-sizing: border-box;
}

.pa-cta__row {
	position: relative;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	width: 100%;
	/* Lets the mouse reach the WebGL background between the two items. */
	pointer-events: none;
}

.pa-cta__row .pa-btn {
	pointer-events: auto;
}

.pa-cta__title {
	max-width: 14ch;
	margin: 0;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: clamp(28px, 4.2vw, 60px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pa-black);
	text-wrap: balance;
}


/* ===========================================================================
   11. FOOTER
   ========================================================================= */

.pa-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 32px var(--pa-gutter);
	background: var(--pa-line);
}

.pa-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--pa-black);
	text-decoration: none;
}

.pa-footer__brand .pa-logo-mark {
	display: block;   /* the footer always uses the monogram */
}

.pa-footer__wordmark {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--pa-black);
}

.pa-footer__links {
	display: flex;
	gap: 24px;
}

.pa-footer__link {
	font-size: 13px;
	font-weight: 400;
	color: var(--pa-ink);
	text-decoration: none;
	transition: color 0.07s linear;
}

.pa-footer__link:hover {
	color: var(--pa-black);
}


/* ===========================================================================
   12. CONTACT MODAL + FORM
   Opened by any [data-pa-open-modal] link. Without JavaScript the :target
   rule below still opens it, because those links point at #contact-form.
   ========================================================================= */

.pa-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.pa-modal:target,
.pa-modal.is-open {
	display: flex;
}

.pa-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 13, 13, 0.6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.pa-modal__box {
	position: relative;
	width: min(680px, 92vw);
	max-height: 90vh;
	padding: clamp(24px, 4vw, 48px);
	background: var(--pa-white);
	border-radius: var(--pa-radius);
	overflow: auto;
	box-sizing: border-box;
	animation: pa-rise 0.3s var(--pa-ease) both;
}

.pa-modal__close {
	position: absolute;
	top: 24px;
	right: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: var(--pa-white);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-radius-sm);
	color: var(--pa-black);
	cursor: pointer;
}

.pa-modal__title {
	max-width: 80%;
	margin: 0 0 12px;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pa-black);
}

.pa-modal__lead {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--pa-ink);
}

.pa-modal__note {
	margin: 0 0 32px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--pa-grey);
}

.pa-modal__note a {
	color: var(--pa-ink);
	text-decoration: underline;
}

.pa-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.pa-field + .pa-field,
.pa-form__grid + .pa-field {
	margin-top: 16px;
}

.pa-field__label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--pa-font-display);
	font-weight: 700;
	font-size: 8.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pa-grey);
}

.pa-input {
	width: 100%;
	height: 52px;
	padding: 0 20px;
	background: var(--pa-line);
	border: none;
	border-radius: var(--pa-radius-sm);
	font-family: var(--pa-font-body);
	font-size: 15px;
	font-weight: 400;
	color: var(--pa-black);
	box-sizing: border-box;
}

.pa-input::placeholder {
	color: var(--pa-grey);
}

.pa-textarea {
	height: auto;
	padding: 16px 20px;
	resize: vertical;
}

.pa-form__send {
	margin-top: 24px;
	padding: 0 32px;
}

.pa-form__policy {
	margin: 24px 0 0;
	font-size: 12px;
	color: var(--pa-grey);
}

.pa-form__policy a {
	color: var(--pa-grey);
	text-decoration: none;
}

.pa-form__policy a:hover {
	color: var(--pa-grey);
	text-decoration: underline;
}

/* Honeypot: off-screen for people, still fillable by bots. */
.pa-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ===========================================================================
   13. RESPONSIVE
   Checked at 375 / 768 / 1280px. Two-column grids collapse before they get
   too narrow to read.
   ========================================================================= */

@media (max-width: 900px) {

	.pa-split {
		grid-template-columns: 1fr;
	}

	.pa-panel {
		min-height: 320px;
	}

	.pa-faq {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.pa-cta__row {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 700px) {

	/* Brand book §06: the lockup becomes the monogram on small screens. */
	.pa-header .pa-logo-lockup { display: none; }
	.pa-header .pa-logo-mark   { display: block; }

	.pa-hero {
		padding-top: 112px;
	}

	.pa-faq__q {
		padding: 20px 4px;
		font-size: 16px;
	}

	.pa-faq__a p {
		padding: 0 4px 20px;
	}
}

@media (max-width: 560px) {

	/* Not enough room for three controls — the section is reachable by scroll. */
	.pa-header__services {
		display: none;
	}

	.pa-form__grid {
		grid-template-columns: 1fr;
	}

	.pa-form__grid .pa-field + .pa-field {
		margin-top: 0;   /* the grid gap already spaces them */
	}

	.pa-footer {
		justify-content: flex-start;
		gap: 16px 24px;
	}

	.pa-modal {
		padding: 12px;
	}

	.pa-modal__box {
		max-height: 92vh;
		padding: 24px 20px 32px;
	}

	.pa-modal__title {
		max-width: calc(100% - 40px);
	}
}


/* ===========================================================================
   14. REDUCED MOTION / NO JAVASCRIPT
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.pa-rise,
	.pa-modal__box {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.pa-faq__a,
	.pa-faq__icon::after,
	.pa-btn {
		transition: none !important;
	}
}

/*
 * Without JavaScript the scroll choreography never runs, so the USP cards
 * would sit one screen below the fold forever. Fall back to a plain grid.
 */
.no-js .pa-usp {
	height: auto;
	padding: 96px 0;
}

.no-js .pa-usp__sticky {
	position: static;
	flex-direction: column;
	height: auto;
	gap: 24px;
	padding: 0 var(--pa-gutter);
}

.no-js .pa-usp__head {
	position: static;
	transform: none;
	margin-bottom: 24px;
}

.no-js .pa-usp__card {
	position: static;
	height: auto;
	max-height: none;
	transform: none;
}

.no-js .pa-catch__head {
	transform: none;
	opacity: 1;
}

.no-js .pa-faq__a {
	grid-template-rows: 1fr;
}

.no-js .pa-faq__a-inner {
	visibility: visible;
}

.no-js .pa-faq__icon {
	display: none;
}