/* Precision — site-only rules. Each rule here is a candidate for a parent
   block style once a second site needs it. */

/* ---- Header ---------------------------------------------------------------- */

.pkb-header__phone {
	margin: 0;
	font-weight: var(--wp--custom--font--weight--semibold);
	white-space: nowrap;
}

.pkb-header__phone a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.pkb-header__phone a:hover {
	text-decoration: underline;
}

.oogle-header__cta .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 781px) {
	.pkb-header__phone {
		display: none;
	}
}

/* ---- Footer -------------------------------------------------------------- */

.pkb-footer__logo img {
	background: var(--wp--preset--color--base);
	padding: 0.5rem 0.75rem;
	border-radius: var(--wp--custom--radius--sm);
}

/* ---- Hero: portrait photo with an overlapping inset ---------------------- */

.pkb-hero__media {
	position: relative;
}

.pkb-hero__media > .wp-block-image:first-child img {
	border-radius: var(--wp--custom--radius--lg);
}

.pkb-hero__inset {
	position: absolute;
	inset-inline-start: -12%;
	inset-block-end: 6%;
	inline-size: 40%;
	margin: 0;
	border: 6px solid var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--lg);
	overflow: clip;
}

.pkb-hero__inset img {
	display: block;
	border-radius: 0;
}

/* Below core's column-stacking width the inset would overlap text, and the
   portrait crop of the main photo runs too tall; hide one, re-crop the other. */
@media (max-width: 781px) {
	.pkb-hero__inset {
		display: none;
	}

	/* The block writes aspect-ratio inline on the img, so re-crop via the figure. */
	.pkb-hero__media .oogle-lcp {
		aspect-ratio: 3 / 2;
	}

	.pkb-hero__media .oogle-lcp img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}
}

.pkb-hero__facts {
	color: var(--wp--preset--color--muted);
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Separator trails each item (not leads the next) so a wrapped line never
   starts with a stray dot. */
.pkb-hero__facts {
	column-gap: var(--wp--preset--spacing--30);
}

.pkb-hero__facts > li:not(:last-child)::after {
	content: "·";
	margin-inline-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--line);
}

/* ---- Quick project form card ---------------------------------------------- */

.pkb-form.is-style-card {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	box-shadow: var(--wp--preset--shadow--md);
}

.pkb-start__aside {
	padding-block-start: var(--wp--preset--spacing--40);
}

/* ---- Large quotes ------------------------------------------------------------ */

.pkb-quote-lg > p:first-of-type::before,
.pkb-quote-xl > p:first-of-type::before {
	font-size: 2em;
}

.pkb-quote-xl > p {
	font-family: var(--wp--preset--font-family--heading);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* ---- Process timeline -------------------------------------------------------- */

.pkb-process__intro {
	position: sticky;
	top: calc(var(--wp--preset--spacing--60) + 4rem); /* below the sticky header */
}

.pkb-steps {
	border-inline-start: 1px solid var(--wp--preset--color--line);
}

.pkb-step {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--50);
}

.pkb-step::before {
	content: "";
	position: absolute;
	inset-inline-start: -5px;
	inset-block-start: calc(var(--wp--preset--spacing--40) + 0.35em);
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* ---- Remodeling paths --------------------------------------------------------- */

.pkb-path .wp-block-image img {
	border-radius: var(--wp--custom--radius--lg);
}

/* ---- Full-bleed photo bands ------------------------------------------------- */

.pkb-imagine,
.pkb-final {
	overflow: clip; /* contains the drifting image */
}