/*
 * Inner page shell.
 *
 * Ported from the live compiled CSS (index-CTd4ANgl.css). Covers the innerPage
 * wrapper used by About, Services and the works page: white background, the
 * heading scale, and the sectionHead block with its recurring 35.32934% left
 * offset. Responsive steps at 991px and 700px match live.
 *
 * The onInnerPage hamburger colour (dark bars below 1240px) already lives in
 * main.css with the rest of the navigation, so it is not repeated here.
 * pageHeader styling is deferred: live has two different .pageHeader variants
 * (the works page and the case study), which the works and single templates
 * will disambiguate.
 */

.innerPage {
	background: #fff;
}

.innerPage a {
	color: #000 !important;
}

/*
 * The compiled CSS declares margin-bottom: 5rem here, but on live Elementor's
 * heading-widget CSS overrides it to 0 and wins the cascade, so the rendered
 * value is 0. The React shell had no Elementor CSS in the cascade; the theme
 * does, so match live's computed value and omit the margin.
 */
.innerPage h1 {
	font-size: 8rem;
	font-weight: 600;
	line-height: 0.65;
	text-transform: capitalize;
}

.innerPage h5 {
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.3;
}

.innerPage .sectionHead {
	padding-bottom: 5rem;
	max-width: 1550px;
	margin: 0 auto;
}

.innerPage .sectionHead span {
	display: inline-block;
	opacity: 0.65;
	font-size: 0.8rem;
	padding-left: 35.32934%;
}

.innerPage .sectionHead h2 {
	font-size: 5rem;
	font-weight: 600;
	line-height: 0.9;
	margin-block: 2rem 4rem;
	padding-left: 35.32934%;
}

.innerPage .sectionHead p {
	padding-left: 35.32934%;
}

@media (max-width: 991px) {
	.innerPage h1 {
		font-size: 7rem;
		line-height: 1;
	}

	.innerPage .sectionHead h2 {
		font-size: 4rem;
	}
}

@media (max-width: 700px) {
	.innerPage .sectionHead span {
		padding-left: 0;
	}

	.innerPage .sectionHead h2 {
		font-size: 3.5rem;
		margin-block: 2rem 3rem;
		padding-left: 0;
	}

	.innerPage .sectionHead p {
		padding-left: 0;
	}

	.innerPage h1 {
		font-size: 5rem;
		line-height: 0.95;
	}

	.innerPage h5 {
		font-size: 1.2rem;
		padding-left: 0;
	}
}

/* -------------------------------------------------------------------------
 * Hover-dot for the #jump_to_links option lists.
 *
 * Shared by all three inner-page lists that use the Elementor icon-list markup:
 * the Works tag filter, the Services "Jump ahead" nav and the About anchor list.
 * hover-dot.js injects one .hover-dot into the list and slides it to the hovered
 * item; the text nudge below is pure CSS. Live shows the dot on the Works list
 * only, so this is a deliberate divergence for consistency (logged in CLAUDE.md).
 *
 * inner.css loads on every inner page, so these rules reach all three. The list
 * is position:relative (the base * rule) so the absolute dot anchors to it.
 * ---------------------------------------------------------------------- */
.innerPage #jump_to_links .elementor-icon-list-text {
	display: inline-block;
	transition: all 0.2s ease-in-out;
	padding: 0;
}

.innerPage #jump_to_links .elementor-icon-list-item:hover .elementor-icon-list-text {
	padding-left: 0.5rem;
}

.hover-dot {
	position: absolute;
	left: -10px;
	width: 6px;
	height: 6px;
	background-color: #000;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: top 0.2s ease, opacity 0s ease;
}