/**
 * PS Design System — section-level overrides (gated: body.ps-ds).
 * Element-id selectors target sections of the Elementor templates;
 * if a section is ever rebuilt in the editor its id changes and the
 * override simply stops applying (fails quiet, never breaks).
 */

/* ---- hero ------------------------------------------------------------ */

.ps-ds h1.haru-heading-title--heading-4 {
	font-size: clamp(2.5rem, 4.4vw, 4rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	font-weight: 600;
}

/* The proof-marker under the key phrase — CMYK yellow, not demo green. */
.ps-ds .haru-heading-title--heading-4 span:after {
	background: linear-gradient(101deg, var(--ps-yellow) 2%, var(--ps-yellow-soft) 105%);
	opacity: 0.55;
}

/* ---- demo gradient washes (theme utility classes) --------------------- */

/* The theme ships a family of peach/purple section washes
   (.section-bg-gradient-*) — all demo-palette, all off-brand.
   Neutralized in marketing scope; brand washes are re-applied by the
   more specific id rules below (same importance, later + more specific). */
.ps-ds [class*="section-bg-gradient-"],
.ps-ds [class*="section-bg-gradient-"] .e-con,
.ps-ds [class*="section-bg-gradient-"] .e-con-inner {
	background-image: none !important;
	background-color: transparent !important;
}

/* ---- homepage: features band (was a peach/pink demo wash) ------------ */

/* Corner radials sit INSIDE the section (72-78% on the axis toward the
   edge) so they fade out before the boundary — a radial centered ON the
   edge gets guillotined by the next section and reads as a hard seam. */
.ps-ds .elementor-element-14f06c4 {
	background-color: var(--ps-paper) !important;
	background-image:
		radial-gradient(42rem 26rem at 8% 4%, rgba(var(--ps-cyan-rgb), 0.07), transparent 58%),
		radial-gradient(38rem 22rem at 92% 72%, rgba(var(--ps-magenta-rgb), 0.05), transparent 56%) !important;
}

.ps-ds .elementor-element-14f06c4 .elementor-widget-haru-decor {
	display: none;
}

/* Inner containers of the band carry their own demo washes — flatten them. */
.ps-ds .elementor-element-14f06c4 .e-con {
	background-color: transparent !important;
	background-image: none !important;
}

/* Demo-coral icons → process cyan. The theme paints these glyphs with a
   gradient-clip trick (transparent text fill over a coral gradient), so the
   whole mechanism is reset, not just `color`. Style-4 is the feature-card
   icon-box variant. */
.ps-ds .haru-icon-box--style-4 .haru-icon-box__icon,
.ps-ds .haru-icon-box--style-4 .haru-icon-box__icon span,
.ps-ds .haru-icon-box--style-4 .haru-icon-box__icon i {
	background-image: none !important;
	-webkit-text-fill-color: currentColor !important;
	color: var(--ps-cyan) !important;
	fill: var(--ps-cyan);
}

.ps-ds .elementor-element-14f06c4 .haru-icon-box {
	background-color: var(--ps-surface);
	border-radius: var(--ps-r-lg);
	box-shadow: var(--ps-shadow-card);
	transition-property: transform, box-shadow;
	transition-duration: 0.25s;
	transition-timing-function: var(--ps-ease);
}

.ps-ds .elementor-element-14f06c4 .haru-icon-box:hover {
	transform: translateY(-4px);
	box-shadow: var(--ps-shadow-card-hover);
}

/* ---- homepage: trust band -------------------------------------------- */

.ps-ds .elementor-element-35ac8a2 .haru-heading-title--heading-12 {
	letter-spacing: -0.02em;
}

/* ---- about page: demo-pink band + blob decors ------------------------- */

.ps-ds .elementor-element-a795817 {
	background-color: var(--ps-paper) !important;
	background-image:
		radial-gradient(42rem 26rem at 6% 4%, rgba(var(--ps-cyan-rgb), 0.06), transparent 58%),
		radial-gradient(38rem 22rem at 92% 74%, rgba(var(--ps-magenta-rgb), 0.05), transparent 56%) !important;
}

.ps-ds .elementor-element-a795817 .haru-icon-box {
	background-color: var(--ps-surface);
	border-radius: var(--ps-r-lg);
	box-shadow: var(--ps-shadow-card);
}

.ps-ds .elementor-element-a795817 .haru-decor,
.ps-ds .elementor-element-6f9fd7a .haru-decor {
	display: none;
}

/* Style-15 icon boxes use the same gradient-clip glyph trick. */
.ps-ds .haru-icon-box--style-15 .haru-icon-box__icon,
.ps-ds .haru-icon-box--style-15 .haru-icon-box__icon span,
.ps-ds .haru-icon-box--style-15 .haru-icon-box__icon i {
	background-image: none !important;
	-webkit-text-fill-color: currentColor !important;
	color: var(--ps-cyan) !important;
}

/* The wave divider section above (pink field + pink SVG waves) → paper + cyan wash. */
.ps-ds .elementor-element-7f5f489 {
	background-color: var(--ps-paper) !important;
	background-image: none !important;
}

.ps-ds .haru-waves use {
	fill: rgba(var(--ps-cyan-rgb), 0.06);
}

.ps-ds .haru-waves use.haru-waves__second {
	fill: rgba(var(--ps-cyan-rgb), 0.04);
}

/* ---- interior page-title banner --------------------------------------- */

.ps-ds .haru-page-title {
	background-color: var(--ps-paper);
	border-bottom: 1px solid var(--ps-line);
}

.ps-ds .haru-page-title__heading--main {
	font-size: clamp(2.1rem, 3.4vw, 3.1rem);
	letter-spacing: -0.02em;
	font-weight: 600;
	color: var(--ps-heading);
}

.ps-ds .haru-page-title .haru-breadcrumb,
.ps-ds .haru-page-title .haru-breadcrumb a {
	color: var(--ps-text-soft);
}

.ps-ds .haru-page-title .haru-breadcrumb a:hover {
	color: var(--ps-cyan-deep);
}

/* ---- generic section polish ------------------------------------------- */

/* Big section titles breathe a little tighter. */
.ps-ds h2.haru-heading-title--heading-12 {
	letter-spacing: -0.018em;
	font-weight: 600;
}

/* Images inside content get the quiet outline treatment. */
.ps-ds .elementor-widget-image img {
	outline: 1px solid rgba(0, 0, 0, 0.06);
	outline-offset: -1px;
}

/* The FAQ CTA gradient band (FAQs page) keeps demo colors in its own
   settings — recolor to a cyan→magenta print wash. */
.ps-ds .elementor-element-e5fe42e {
	background-image: linear-gradient(120deg, var(--ps-cyan) 0%, #7b6bd6 55%, var(--ps-magenta) 120%) !important;
}

/* ---- T3: hero aurora ---------------------------------------------------- */

/* The hero section carried the demo's warm cream (#EFE6D9) + a peach wash
   image; the brand version is paper with a faint CMYK aurora — cyan where
   the cards float, magenta and yellow as whispers. */
.ps-ds .elementor-element-c2bfbc2 {
	background-color: var(--ps-paper) !important;
	background-image:
		radial-gradient(52rem 34rem at 82% 16%, rgba(var(--ps-cyan-rgb), 0.10), transparent 62%),
		radial-gradient(42rem 26rem at 8% 72%, rgba(var(--ps-magenta-rgb), 0.05), transparent 56%),
		radial-gradient(30rem 22rem at 30% 10%, rgba(var(--ps-yellow-rgb), 0.07), transparent 58%) !important;
}

.ps-ds .elementor-element-65fcbf6 {
	background-image: none !important;
	/* The card composition intentionally hangs past this aspect-ratio canvas
	   (top:-8% / bottom:-8% offsets) — the canvas's own overflow:hidden was
	   beheading the top cards and cutting the bottom one. The hero section
	   (c2bfbc2) still clips, so the below-section decor stays contained while
	   the cards get their headroom up toward the header. */
	overflow: visible !important;
}

/* ---- T3: hero scatter — depth perspective -------------------------------- */

/* The demo sized all six cards nearly equal, which flattens the scene: a
   near card must render bigger than a far one. Bottom band = near plane,
   top band = far plane, the blurred card = background bokeh; z-order
   mirrors the same depth so a near card always overlaps a far one. */
/* Depth must read at a glance: ~2x between nearest and farthest, not a
   timid step. The blurred card is the deepest plane — blur + smallest size
   agree; at near-equal size the blur contradicted the scene. */
.ps-ds .elementor-element-5fa394f {
	--container-widget-width: 33% !important; /* nova — nearest */
	max-width: 33% !important;
	z-index: 3;
}

.ps-ds .elementor-element-c1de53a {
	--container-widget-width: 30% !important; /* atlas — near (Elementor already z:2) */
	max-width: 30% !important;
}

.ps-ds .elementor-element-4b57b57 {
	--container-widget-width: 29% !important; /* petal & stem — near */
	max-width: 29% !important;
	z-index: 2;
}

.ps-ds .elementor-element-7520f8c {
	--container-widget-width: 23% !important; /* 360print — mid distance */
	max-width: 23% !important;
	z-index: 1;
}

.ps-ds .elementor-element-0bb22ea {
	--container-widget-width: 17.5% !important; /* alpine — far */
	max-width: 17.5% !important;
	z-index: 1;
}

.ps-ds .elementor-element-835a239 {
	--container-widget-width: 16.5% !important; /* blurred card — deepest, bokeh */
	max-width: 16.5% !important;
	z-index: 0;
}

/* ---- T3: hero trust row — one line per chip at every width --------------- */

/* Copy is kept short in the page content; the fluid size absorbs the
   1200px-and-up squeeze where four columns get tight. A wrapped chip label
   is a defect, not a fallback. */
.ps-ds .elementor-element-d9b0f98 .haru-icon-box__title {
	white-space: nowrap;
	font-size: clamp(0.9rem, 0.35rem + 0.75vw, 1rem);
	margin-bottom: 0;
}

/* The label centers on the icon square's vertical middle — by default the
   content block stretches to the icon's height and the text rides its top. */
.ps-ds .elementor-element-d9b0f98 .haru-icon-box--style-9 {
	align-items: center;
}

/* On small screens the section's 4% top padding shrinks below the top
   card's overhang + the float bob amplitude (~11px), so the highest card
   kissed the section clip mid-animation. Floor the padding at 40px. */
@media (max-width: 1024px) {
	.ps-ds .elementor-element-c2bfbc2 {
		padding-top: max(4%, 40px) !important;
	}
}

/* Between Elementor's own tablet 2x2 (<=1024) and the comfortable >=1200
   four-up sits a band where four one-line chips cannot fit — wrap it 2x2
   there too. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.ps-ds .elementor-element-d9b0f98 {
		flex-wrap: wrap;
	}

	.ps-ds .elementor-element-d9b0f98 > .e-con {
		width: 50%;
		max-width: 50%;
	}
}

/* ---- T3: "BUSINESS CARDS" template band --------------------------------- */

/* Kill the giant demo blob decors; quiet paper + a cyan breath instead. */
.ps-ds .elementor-element-9041076 .elementor-widget-haru-decor {
	display: none;
}

.ps-ds .elementor-element-74af690 {
	background-color: var(--ps-paper) !important;
	background-image:
		radial-gradient(46rem 30rem at 78% 20%, rgba(var(--ps-cyan-rgb), 0.07), transparent 62%),
		radial-gradient(40rem 26rem at 12% 90%, rgba(var(--ps-magenta-rgb), 0.04), transparent 60%) !important;
}

/* ---- T3: stats band ------------------------------------------------------ */

.ps-ds .ps-stats-band {
	--flex-direction: row;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	padding: 72px 24px;
}

.ps-ds .ps-stats-band .ps-stat {
	--flex-direction: column;
	flex-direction: column;
	flex: 1 1 0;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	padding: 10px 28px;
}

.ps-ds .ps-stats-band .ps-stat + .ps-stat {
	border-left: 1px solid var(--ps-line);
}

/* css_classes lands on the widget WRAPPER; the core heading widget renders
   .elementor-heading-title inside it. */
.ps-ds .ps-stats-band .ps-stat-num .elementor-heading-title {
	font-size: clamp(2.2rem, 3.6vw, 3.2rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ps-heading);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.ps-ds .ps-stats-band .ps-stat-label .elementor-heading-title {
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ps-text-soft);
	margin-top: 10px;
}

@media (max-width: 991px) {
	.ps-ds .ps-stats-band {
		flex-wrap: wrap;
		row-gap: 34px;
		padding: 52px 12px;
	}

	.ps-ds .ps-stats-band .ps-stat {
		flex: 1 1 44%;
	}

	.ps-ds .ps-stats-band .ps-stat:nth-child(3) {
		border-left: none;
	}
}

/* ---- responsive guards ------------------------------------------------- */

@media (max-width: 767px) {
	.ps-ds h1.haru-heading-title--heading-4 {
		font-size: clamp(2.1rem, 8vw, 2.6rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ps-ds .elementor-element-14f06c4 .haru-icon-box {
		transition: none;
	}

	.ps-ds .elementor-element-14f06c4 .haru-icon-box:hover {
		transform: none;
	}
}