/* Custom Platforms page styles.
   Loads after home-2026.css (the shared header, footer, buttons, shapes, dots and tokens)
   and only styles this page's own sections. Nothing here targets .masthead, .nav, .mega,
   .offcanvas, .searchbar or .footer, so the header and menus stay exactly as on the homepage.
   (The sticky-header overflow fix lives in home.css, shared with the homepage.) */

.br-lg { display: none; }
@media (min-width: 980px) { .br-lg { display: inline; } }

/* ---------- Breadcrumb bar (live service-page pattern) ---------- */
.crumbs { background: var(--blue); }
.crumbs__list {
	display: flex; flex-wrap: wrap; align-items: center;
	min-height: 50px; padding: 10px 0; margin-top: 0; margin-bottom: 0;
	list-style: none; text-transform: uppercase; color: var(--white); font-size: .95rem; line-height: 1.4;
}
.crumbs__list li { display: inline-flex; align-items: center; }
.crumbs__list li + li::before { content: "\2192"; margin: 0 .7rem; }
.crumbs__list a { color: var(--white); text-decoration: none; }
.crumbs__list a:hover { text-decoration: underline; }

/* ---------- Ghost button (secondary hero CTA) on top of the shared .btn ---------- */
.btn--ghost { --btn-bg: transparent; --btn-hover: var(--green); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.btn--ghost .btn__icon { color: var(--purple); }
.btn--ghost:hover, .btn--ghost:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.btn--ghost:hover .btn__icon, .btn--ghost:focus-visible .btn__icon { color: var(--green); }

/* ---------- Hero (live service-page hero image) ---------- */
.cp-hero {
	background: var(--purple-light) url("https://xponent21.com/wp-content/uploads/2023/02/x21-hero-background.webp") center / cover no-repeat;
	color: var(--white);
	text-align: center;
}
.cp-hero__inner { padding: 4.5rem 0 4.25rem; max-width: 980px; }
.cp-hero h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.4vw, 2.5rem); line-height: 1.4; margin: 0 0 1rem; }
.cp-hero__sub { font-size: clamp(1rem, .95rem + .4vw, 1.25rem); max-width: 720px; margin: 0 auto 2rem; }
.cp-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.25rem; margin-bottom: 1.75rem; }
.cp-hero__cross { font-size: .85rem; margin: 0; }
.cp-hero__cross a { color: var(--white); font-weight: 700; text-underline-offset: 3px; }

/* ---------- Shared section bits ---------- */
.cp-section { padding: calc(var(--section-y) * 1.5) 0; position: relative; }
.cp-section .h2 { position: relative; z-index: 1; }

.cp-photo { position: relative; z-index: 1; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; width: 100%; }

/* Highlighted text block (sections 2 and 6): white panel, accent bar, navy text */
.callout {
	position: relative; z-index: 1;
	padding: 1.75rem 2rem 1.75rem 2.25rem;
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border-left: 6px solid var(--blue);
	line-height: 1.75;
}
.callout p:last-child { margin-bottom: 0; }
.callout--green { border-left-color: var(--green); }

/* Split text + media (homepage .intro pattern) */
.cp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; align-items: center; }
.cp-split--reverse .cp-split__text { order: 2; }
.cp-split__media { position: relative; padding: 2rem 0 2.5rem 2.5rem; }
.cp-split__media .cp-photo { aspect-ratio: 4 / 3; }
.problem__shape1 { left: 0; top: 0; }
.problem__shape2 { right: -1.5rem; bottom: 0; }

/* ---------- Section 3: sticky intro + vertical list ----------
   overflow: clip (not hidden) keeps the shapes trimmed without breaking position: sticky. */
.build {
	overflow: clip;
	background:
		radial-gradient(circle at 1px 1px, rgba(97, 88, 206, .10) 1px, transparent 1.5px) 0 0 / 18px 18px,
		#fafafe;
}
.build__shape { right: -40px; top: 3rem; opacity: .35; }
.build__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
.build__intro { position: sticky; top: 130px; padding-top: .5rem; }
.cat-list { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.cat {
	position: relative;
	background: var(--white);
	border-radius: 30px;
	padding: 2rem 2.25rem 2rem 2.75rem;
	box-shadow: 0 10px 30px rgba(9, 7, 60, .07);
	overflow: hidden;
}
.cat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; }
.cat--purple::before { background: var(--purple); }
.cat--blue::before { background: var(--blue); }
.cat--green::before { background: var(--green); }
.cat h3 { font-family: var(--font-head); font-size: 1.35rem; font-weight: 800; line-height: 1.4; color: var(--purple); margin: 0 0 .6rem; }
.cat p { font-size: 1rem; margin: 0; }
.cat a { color: var(--purple); font-weight: 700; }

/* ---------- Section 4: example cards ---------- */
.examples { overflow: clip; }
.examples__shape { right: 2%; top: 4.5rem; }
.examples__head { position: relative; text-align: center; }
.examples__circle { left: calc(50% - 25rem); top: -1.75rem; }
.ex-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }

.ex-card { position: relative; display: flex; flex-direction: column; }
.ex-shot { aspect-ratio: 16 / 10; overflow: hidden; background: var(--white); }
.ex-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; }
.ex-meta { margin: 0; line-height: 1.35; }
.ex-eyebrow, .ex-client { display: block; }
.ex-title { font-family: var(--font-head); font-weight: 700; color: var(--navy); margin: 0; }
.ex-desc { font-size: 1rem; line-height: 1.6; margin: 0; }
.ex-cta {
	margin-top: auto;
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	text-decoration: none; color: var(--navy); font-weight: 700; font-size: .9rem;
}
/* The CTA link covers the whole card, so the full card is clickable */
.ex-cta::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.ex-cta__icon {
	flex: none; display: grid; place-items: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--green); color: var(--white);
	transition: background-color .3s ease, color .3s ease;
}
.ex-cta__icon svg { width: 14px; height: 14px; }
.ex-card--link { transition: transform .25s ease, box-shadow .25s ease; }
.ex-card--link:hover, .ex-card--link:focus-within { transform: translateY(-4px); }
.ex-card--link:hover .ex-shot img { transform: scale(1.03); }
.ex-card--link:hover .ex-cta__icon, .ex-card--link:focus-within .ex-cta__icon { background: var(--navy); }
.ex-card:not(.ex-card--link) { cursor: default; }

/* Option A: eyebrow + client name, text CTA with arrow (default on the page) */
.ex-grid--a .ex-card { padding: 1.25rem 1.25rem 1.4rem; background: var(--card-grey); border-radius: 25.5px; box-shadow: var(--shadow); }
.ex-grid--a .ex-shot { border-radius: var(--radius-sm); box-shadow: var(--shadow); margin-bottom: 1.15rem; }
.ex-grid--a .ex-meta { padding: 0 .4rem; }
.ex-grid--a .ex-eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5d5a7e; }
.ex-grid--a .ex-client { font-size: .95rem; font-weight: 700; color: var(--purple); }
.ex-grid--a .ex-title { font-size: 1.2rem; line-height: 1.35; padding: 0 .4rem; margin-top: 1rem; margin-bottom: .55rem; }
.ex-grid--a .ex-desc { padding: 0 .4rem; margin-bottom: 1.4rem; }
.ex-grid--a .ex-cta { padding-left: .4rem; }
.ex-grid--a .ex-card--link:hover { box-shadow: 0 0 0 2px var(--purple), 0 16px 30px rgba(9, 7, 60, .12); }

/* Option B: white card, accent rule over the client, full-width navy pill CTA (homepage .pcard button) */
.ex-grid--b .ex-card { padding: 1.25rem 1.25rem 1.4rem; background: var(--white); border: 1px solid #e3e1ef; border-radius: 25.5px; box-shadow: var(--shadow); }
.ex-grid--b .ex-shot { border-radius: var(--radius-sm); margin-bottom: 1.25rem; box-shadow: 0 0 0 1px rgba(9, 7, 60, .06); }
.ex-grid--b .ex-meta { padding: 0 .4rem; }
.ex-grid--b .ex-meta::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--green); margin-bottom: .6rem; }
.ex-grid--b .ex-eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5d5a7e; }
.ex-grid--b .ex-client { font-size: .95rem; font-weight: 700; color: var(--navy); }
.ex-grid--b .ex-title { font-size: 1.25rem; line-height: 1.35; padding: 0 .4rem; margin-top: 1rem; margin-bottom: .55rem; color: var(--purple); }
.ex-grid--b .ex-desc { padding: 0 .4rem; margin-bottom: 1.4rem; }
.ex-grid--b .ex-cta { min-height: 50px; padding: 0 5px 0 1.25rem; border-radius: var(--pill); background: var(--navy); color: var(--white); font-weight: 400; transition: background-color .3s ease; }
.ex-grid--b .ex-cta__icon { background: var(--white); color: var(--navy); }
.ex-grid--b .ex-card--link:hover .ex-cta { background: var(--green); }
.ex-grid--b .ex-card--link:hover .ex-cta__icon { background: var(--white); color: var(--green); }
.ex-grid--b .ex-card--link:hover { box-shadow: 0 16px 30px rgba(9, 7, 60, .14); border-color: var(--purple); }

/* Option C: client chip on the screenshot, title first, CTA right-aligned */
.ex-grid--c .ex-card { padding: 0 0 1.4rem; background: var(--card-grey); border-radius: 25.5px; box-shadow: var(--shadow); overflow: hidden; }
.ex-grid--c .ex-shot { position: relative; border-radius: 25.5px 25.5px 0 0; }
.ex-grid--c .ex-meta {
	position: relative; z-index: 1;
	align-self: flex-start;
	margin: -2.1rem 0 0 1.1rem;
	padding: .55rem .95rem .6rem;
	background: var(--white); border-radius: 14px; box-shadow: var(--shadow);
	max-width: calc(100% - 2.2rem);
}
.ex-grid--c .ex-eyebrow { font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.ex-grid--c .ex-client { font-size: .9rem; font-weight: 700; color: var(--navy); }
.ex-grid--c .ex-title { font-size: 1.2rem; line-height: 1.35; padding: 0 1.5rem; margin-top: 1.1rem; margin-bottom: .55rem; color: var(--navy); }
.ex-grid--c .ex-desc { padding: 0 1.5rem; margin-bottom: 1.4rem; }
.ex-grid--c .ex-cta { padding: 0 1.25rem 0 1.5rem; justify-content: flex-end; color: var(--purple); }
.ex-grid--c .ex-card--link:hover { box-shadow: 0 0 0 2px var(--green), 0 16px 30px rgba(9, 7, 60, .12); }

/* ---------- Section 5: numbered steps (colors from the live Website Design process strip) ---------- */
.process {
	background:
		radial-gradient(circle at 1px 1px, rgba(97, 88, 206, .10) 1px, transparent 1.5px) 0 0 / 18px 18px,
		#fafafe;
}
.steps { counter-reset: step; max-width: 920px; margin: 2.5rem auto 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.step {
	counter-increment: step;
	display: grid; grid-template-columns: 64px 1fr; gap: 1.5rem; align-items: center;
	padding: 1.4rem 2rem 1.4rem 1.4rem;
	background: var(--white); border-radius: var(--pill);
	box-shadow: 0 8px 24px rgba(9, 7, 60, .06);
}
.step p { margin: 0; }
.step::before {
	content: counter(step);
	display: grid; place-items: center;
	width: 64px; height: 64px; border-radius: 50%;
	color: var(--white); font-family: var(--font-head); font-weight: 900; font-size: 1.6rem;
}
.step--1::before { background: #9ECE61; } /* Understand */
.step--2::before { background: #92B960; } /* Discover */
.step--3::before { background: #45BCDD; } /* Author */
.step--4::before { background: #3197B4; } /* Design */
.step--5::before { background: #605BCE; } /* Optimize */
.step strong { color: var(--purple); }

/* ---------- Section 6: photo mosaic ---------- */
.mosaic { position: relative; padding: 2rem 2rem 6rem 0; }
.mosaic__main { width: 88%; aspect-ratio: 4 / 3; }
.mosaic__a, .mosaic__b { position: absolute; aspect-ratio: 4 / 3; border: 6px solid var(--white); z-index: 2; }
.mosaic__a { right: 0; bottom: 1rem; width: 46%; }
.mosaic__b { left: 8%; bottom: 0; width: 38%; }
.why__shape1 { right: 4%; top: 0; }
.why__shape2 { left: -2rem; top: 40%; }

/* ---------- Section 7: final CTA (light, so it separates from the purple newsletter band) ---------- */
.cta__card {
	position: relative;
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	background: var(--white); border-radius: var(--radius);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 18px 40px rgba(9, 7, 60, .10);
}
.cta__media { position: relative; z-index: 1; min-height: 340px; border-radius: var(--radius) 0 0 var(--radius); overflow: hidden; }
.cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cta__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(2.25rem, 5vw, 4rem); }
.cta__body p { font-size: 1.05rem; margin-bottom: 2rem; }
.cta__shape1 { left: -2.25rem; top: -2.25rem; }
.cta__shape2 { right: -1.5rem; bottom: -1.75rem; }

/* ---------- Scroll reveal (the .js class is set in <head>; content shows without JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.js .reveal--left { transform: translateX(-40px); }
.js .reveal--right { transform: translateX(40px); }
.js .steps .step.reveal { transform: translateX(-36px); }
.js .reveal.is-in, .js .steps .step.reveal.is-in { opacity: 1; transform: none; }

/* Cards dealt onto a table: tilted back and lifted, then laid flat left to right */
.deal { perspective: 1400px; }
.js .deal .ex-card {
	opacity: 0;
	transform: translateY(-60px) rotateX(55deg) rotateZ(-4deg) scale(1.06);
	transform-origin: 50% 100%;
	transition: opacity .45s ease, transform .8s cubic-bezier(.18, .89, .32, 1.12), box-shadow .25s ease, border-color .25s ease;
	transition-delay: var(--d, 0ms);
}
.js .deal .ex-card:nth-child(even) { transform: translateY(-60px) rotateX(55deg) rotateZ(4deg) scale(1.06); }
.js .deal .ex-card.is-in { opacity: 1; transform: none; }
.js .deal .ex-card--link.is-in:hover, .js .deal .ex-card--link.is-in:focus-within { transform: translateY(-4px); }

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

@media (max-width: 979px) {
	.cp-split, .cp-split--reverse { grid-template-columns: 1fr; gap: 2.5rem; }
	.cp-split--reverse .cp-split__text { order: 0; }
	.cp-split__media { padding: 1.5rem 1rem 2rem 1.5rem; max-width: 640px; }
	.mosaic { max-width: 640px; }
	.build__grid { grid-template-columns: 1fr; gap: 2rem; }
	.build__intro { position: static; }
	.cta__card { grid-template-columns: 1fr; }
	.cta__media { min-height: 280px; border-radius: var(--radius) var(--radius) 0 0; }
	/* Shapes that sit next to headings would end up behind the text at this width */
	.build__shape, .examples__shape, .examples__circle { display: none; }
}

@media (max-width: 767px) {
	.crumbs__list { font-size: .8rem; min-height: 44px; }
	.cp-hero__inner { padding: 3rem 0; }
	.cp-hero__actions { flex-direction: column; align-items: stretch; }
	.callout { padding: 1.4rem 1.25rem 1.4rem 1.4rem; }
	.shape--circle { width: 4rem; height: 4rem; }
	.shape--rect { width: 100px; height: 72px; }
	.mosaic { padding: 1rem 0 5rem; }
	.mosaic__main { width: 100%; }
	.mosaic__a { width: 52%; bottom: 0; }
	.mosaic__b { left: 0; width: 44%; bottom: 1.5rem; }
	.why__shape2 { left: -1rem; }
	.cat { padding: 1.6rem 1.4rem 1.6rem 2rem; }
	.cat h3 { font-size: 1.2rem; }
	.ex-grid { grid-template-columns: 1fr; }
	.step { grid-template-columns: 48px 1fr; gap: 1rem; padding: 1.1rem 1.25rem 1.1rem 1.15rem; border-radius: 26px; align-items: start; }
	.step::before { width: 48px; height: 48px; font-size: 1.3rem; }
	.cta__shape1 { left: -.75rem; top: -1.25rem; }
	.cta__shape2 { right: -.5rem; bottom: auto; top: 240px; }
	.cta__body .btn { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
	.js .reveal, .js .deal .ex-card { opacity: 1 !important; transform: none !important; transition: none !important; }
	.ex-card--link, .ex-shot img { transition: none; }
}