/* Self-hosted Montserrat - latin only, variable font (single file covers 400-800).
 * Replaces external Google Fonts request - saves 2 render-blocking links and
 * 1 cross-origin handshake. font-display: swap so text paints immediately. */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/montserrat/montserrat-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/montserrat/montserrat-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Colors - from Figma variables (Heading / desc / Primary) */
	--pc-heading: #1c1c19;
	--pc-desc:    #746a66;
	--pc-primary: #ff6a00;
	/* Brand requires #ff6a00 wherever the primary appears, including small
	 * text. WCAG AA on white is 2.87:1 (fails 4.5:1 small-text target) - this
	 * is an accepted brand trade-off. The token stays so we can swap later
	 * without touching every callsite. */
	--pc-primary-text: #ff6a00;
	--pc-white:   #ffffff;
	--pc-line:    #e6e6e6;
	--pc-bg:      #ffffff;
	--pc-img-bg:  #d0caca;

	/* Footer (dark) */
	--pc-footer-bg:    #0b0b0b;
	--pc-footer-text:  rgba(255, 255, 255, 0.6);
	--pc-footer-head:  rgba(255, 255, 255, 0.9);

	/* Typography */
	--pc-font: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

	/* Radii - Figma uses 8px throughout */
	--pc-r:    8px;

	/* Shadows */
	--pc-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.11);

	/* Container - single source of truth for page width + side padding */
	--pc-container-max:    1440px;
	--pc-container-narrow: 1180px;
	--pc-container-pad:    130px;
	--pc-container-pad-md: 32px;
	--pc-container-pad-sm: 16px;
}

@media (max-width: 1024px) {
	:root { --pc-container-pad: var(--pc-container-pad-md); }
}
@media (max-width: 480px) {
	:root { --pc-container-pad: var(--pc-container-pad-sm); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--pc-font);
	color: var(--pc-heading);
	background: var(--pc-bg);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; top: -100px; left: 0;
	background: var(--pc-heading); color: #fff;
	padding: 10px 14px; z-index: 9999;
}
.skip-link:focus { top: 0; }

/* ============================================================
 * Universal image skeleton - shimmering placeholder while images load.
 * Applied via JS to image wrappers; removed once the <img> fires `load`.
 * Designers wanted visible feedback so slow networks do not feel broken.
 * ============================================================ */
@keyframes pc-skel-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position:  200% 0; }
}
.pc-skel {
	position: relative;
	overflow: hidden;
	background: #ece9e5;
}
.pc-skel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0)  0%,
		rgba(255, 255, 255, .55) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	background-size: 200% 100%;
	animation: pc-skel-shimmer 1.4s linear infinite;
	pointer-events: none;
}
.pc-skel.is-loaded {
	background: transparent;
}
.pc-skel.is-loaded::after { display: none; }
@media (prefers-reduced-motion: reduce) {
	.pc-skel::after { animation: none; }
}

/* ============================================================
 * Universal reveal-on-scroll - works on every page
 * JS (reveal.js) auto-tags elements with .pc-reveal class.
 * .pc-js set inline in <head> to prevent flash before JS runs.
 * Section-specific selectors (in home.css etc) supplement this
 * for elements that need to hide BEFORE getting .pc-reveal class.
 * ============================================================ */
.pc-js .pc-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.6s cubic-bezier(.2,.7,.2,1) var(--pc-reveal-delay, 0ms),
		transform 0.6s cubic-bezier(.2,.7,.2,1) var(--pc-reveal-delay, 0ms);
	will-change: opacity, transform;
}
.pc-js .pc-reveal.is-revealed,
.pc-js .is-revealed {
	opacity: 1 !important;
	transform: translateY(0) !important;
}
@media (prefers-reduced-motion: reduce) {
	.pc-js .pc-reveal,
	.pc-js .is-revealed {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}


/* Reveal pre-hide for site-wide elements (footer, home newsletter section).
 * Connect page newsletter is primary content - exclude via :not() so it never
 * sits at opacity:0 while the IO triggers (avoids late-load flicker on reload). */
.pc-js .pc-newsletter__head,
.pc-js .pc-newsletter__form:not(.pc-connect__news-form),
.pc-js .pc-newsletter__group,
.pc-js .pc-footer__brand,
.pc-js .pc-footer__col,
.pc-js .pc-footer__bottom {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.6s cubic-bezier(.2,.7,.2,1) var(--pc-reveal-delay, 0ms),
		transform 0.6s cubic-bezier(.2,.7,.2,1) var(--pc-reveal-delay, 0ms);
	will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
	.pc-js .pc-newsletter__head,
	.pc-js .pc-newsletter__form,
	.pc-js .pc-newsletter__group,
	.pc-js .pc-footer__brand,
	.pc-js .pc-footer__col,
	.pc-js .pc-footer__bottom { opacity: 1 !important; transform: none !important; transition: none !important; }
}