/**
 * Inner pages (2026) — About, Contact, Typical Costs, Pricing, Journey Map,
 * Transformation, Kitchens With Alterations and Blog templates, blog posts
 * and plain pages (see inc/pages-2026.php).
 *
 * Only what these pages have and the homepage does not. Everything else
 * (buttons, sections, the enquiry card, the landing form, reviews, the
 * button bar) comes from css/homepage-2026.css, which loads first. Same
 * colours, spacing and breakpoints (600, 768 and 1024 px), mobile first.
 *
 * Paragraph margins use !important where the homepage stylesheet does, so
 * they hold against any global paragraph rule a plugin may add.
 *
 * 1.1.0: Typical Costs plan drawings fill their cards and open in a pop-up
 * (section 7).
 * 1.2.0: photo headings (the kitchen photograph beside or above the text).
 * 1.3.0: Typical Costs plan cards carry the editor's price guide.
 * 1.4.0: Typical Costs general text in its own section (section 7).
 * 1.5.0: the plan drawing and pop-up styles moved to css/homepage-2026.css
 * (section 11), because the homepage's cost cards use them too.
 * 1.6.0: one enquiry form for the whole site. Typical Costs ends with the
 * shared enquiry section, which can now have a heading (section 3); the
 * page's own booking section, call box and free appointment form styles
 * are gone.
 * 1.7.0: the contact page's card shows the same form (section 4 notes).
 * 1.8.0: the Transformation page's before and after section redesigned
 * (section 10).
 *
 * @package K4_Kitchens_New
 * @author  Steve Austen
 * @company The PCGP
 * @version 1.8.0
 */

/* ═══════════════════════════════════════════
   1. Page heading (charcoal)
   ═══════════════════════════════════════════ */
.k4pg-hero {
	position: relative;
	overflow: hidden;
	padding: 36px 0 44px;
	background: var(--k4-ink);
	color: #ffffff;
	--k4hp-focus: var(--k4-gold);
}

/* A soft gold glow in the corner, drawn with CSS (no image to download). */
.k4pg-hero::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -20%;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(243, 175, 46, 0.16), rgba(243, 175, 46, 0) 65%);
	pointer-events: none;
}

.k4pg-hero__inner {
	position: relative;
}

.k4hp-page .k4pg-hero__title {
	max-width: 18em;
	margin-top: 4px;
	color: #ffffff;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

/* The gold line under the headline: its own line, a little smaller. */
.k4pg-hero__title em {
	display: block;
	margin-top: 0.14em;
	font-size: 0.62em;
	font-style: italic;
	line-height: 1.15;
	color: var(--k4-gold);
}

.k4hp-page .k4pg-hero__intro {
	margin-top: 14px !important;
	max-width: 40em;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.88);
	text-wrap: pretty;
}

.k4pg-hero__intro strong {
	font-weight: 600;
	color: #ffffff;
}

.k4pg-hero .k4hp-cta-group {
	margin-top: 24px;
}

/* Small link under the buttons (the costs page's terms). */
.k4hp-page .k4pg-hero__small {
	margin-top: 16px !important;
	font-size: 0.875rem;
}

.k4pg-hero__small a {
	color: var(--k4-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A post's date, reading time and author. */
.k4hp-page .k4pg-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: 14px !important;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.8);
}

.k4pg-hero--compact {
	padding: 30px 0 36px;
}

/* ── Photo heading (1.2.0) ─────────────────────
   Phones and tablets: the kitchen photograph is a wide band at the top that
   fades into the charcoal, with the Checkatrade pill sitting over the fade
   and the text below. Laptops (further down): the text on charcoal at the
   left, the photograph filling the right and fading into it. */
.k4pg-hero.k4pg-hero--photo {
	padding-top: 0;
}

/* The photograph replaces the gold glow. */
.k4pg-hero--photo::before {
	display: none;
}

.k4pg-hero__media {
	position: relative;
	height: clamp(200px, 52vw, 420px);
	overflow: hidden;
	background: #2a2526;
}

.k4pg-hero--compact .k4pg-hero__media {
	height: clamp(170px, 42vw, 320px);
}

.k4pg-hero__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 58%;
}

.k4pg-hero--focus-left .k4pg-hero__media img {
	object-position: 28% 58%;
}

.k4pg-hero--focus-right .k4pg-hero__media img {
	object-position: 72% 58%;
}

/* Light at the top (under the white header), clear in the middle, charcoal
   at the bottom, so the photograph and the text read as one piece. */
.k4pg-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(27, 24, 25, 0.22) 0%, rgba(27, 24, 25, 0) 22%, rgba(27, 24, 25, 0) 48%, rgba(27, 24, 25, 0.7) 80%, var(--k4-ink) 100%);
	pointer-events: none;
}

.k4pg-hero--photo .k4pg-hero__inner {
	margin-top: -34px;
}

.k4pg-hero--photo .k4hp-pill {
	margin-bottom: 16px;
}

@media (min-width: 1024px) {
	.k4pg-hero.k4pg-hero--photo {
		display: flex;
		align-items: center;
		min-height: 540px;
		padding: 80px 0 88px;
	}

	.k4pg-hero.k4pg-hero--compact.k4pg-hero--photo {
		min-height: 420px;
		padding: 64px 0 72px;
	}

	.k4pg-hero__media,
	.k4pg-hero--compact .k4pg-hero__media {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 52%;
		height: auto;
	}

	/* Fades into the charcoal on the left, and a little at the bottom. */
	.k4pg-hero__media::after {
		background:
			linear-gradient(90deg, var(--k4-ink) 0%, rgba(27, 24, 25, 0.82) 10%, rgba(27, 24, 25, 0.35) 28%, rgba(27, 24, 25, 0) 48%),
			linear-gradient(0deg, rgba(27, 24, 25, 0.35) 0%, rgba(27, 24, 25, 0) 28%);
	}

	.k4pg-hero--photo .k4pg-hero__inner {
		width: 100%;
		margin-top: 0;
	}

	/* The text keeps to the charcoal half. */
	.k4pg-hero--photo .k4pg-hero__content {
		max-width: 48%;
	}

	.k4hp-page .k4pg-hero--photo .k4pg-hero__title {
		font-size: clamp(2.5rem, 1.2rem + 2.4vw, 3.25rem);
	}

	.k4pg-hero--photo .k4hp-pill {
		margin-bottom: 20px;
	}
}

@media (min-width: 1280px) {
	.k4pg-hero__media,
	.k4pg-hero--compact .k4pg-hero__media {
		width: 58%;
	}

	.k4pg-hero--photo .k4pg-hero__content {
		max-width: 560px;
	}

	.k4pg-hero.k4pg-hero--photo {
		min-height: 580px;
	}
}

/* A slow settle as the page opens, for people who have not asked for less
   motion. Only the scale moves (never the opacity), so the photograph counts
   as shown as soon as it arrives. */
@media (prefers-reduced-motion: no-preference) {
	.k4pg-hero__media img {
		animation: k4pg-hero-photo 1.8s cubic-bezier(0.2, 0.6, 0.2, 1) both;
	}
}

@keyframes k4pg-hero-photo {
	from {
		transform: scale(1.06);
	}

	to {
		transform: none;
	}
}

/* ═══════════════════════════════════════════
   2. Editor content, set for reading
   ═══════════════════════════════════════════ */
.k4pg-prose {
	max-width: 760px;
	margin: 0 auto;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--k4-text);
}

.k4pg-prose > * + * {
	margin-top: 1em !important;
}

.k4hp-page .k4pg-prose h2 {
	margin-top: 1.8em !important;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1.2;
}

.k4hp-page .k4pg-prose h3 {
	margin-top: 1.5em !important;
	font-size: 1.25rem;
	line-height: 1.3;
}

.k4hp-page .k4pg-prose h4 {
	margin-top: 1.4em !important;
	font-size: 1.0625rem;
}

.k4hp-page .k4pg-prose > :first-child {
	margin-top: 0 !important;
}

.k4pg-prose ul,
.k4pg-prose ol {
	padding-left: 1.4em;
}

.k4pg-prose ul {
	list-style: disc;
}

.k4pg-prose ol {
	list-style: decimal;
}

.k4pg-prose li + li {
	margin-top: 0.4em;
}

.k4pg-prose li::marker {
	color: var(--k4-gold-deep);
}

.k4pg-prose a {
	font-weight: 600;
	color: var(--k4-ink);
	text-decoration: underline;
	text-decoration-color: var(--k4-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.k4pg-prose a:hover {
	text-decoration-color: var(--k4-ink);
}

.k4pg-prose strong,
.k4pg-prose b {
	font-weight: 700;
	color: var(--k4-ink);
}

.k4pg-prose img {
	height: auto;
	border-radius: var(--k4hp-radius);
}

/* Embedded videos: full width, 16:9, whatever size the editor saved. */
.k4pg-prose iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--k4hp-radius);
}

.k4pg-prose blockquote {
	padding-left: 18px;
	border-left: 4px solid var(--k4-gold);
	font-style: italic;
}

.k4pg-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.k4pg-prose th,
.k4pg-prose td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--k4hp-line);
	text-align: left;
}

/* Plain pages (privacy, terms, thank you): a little less space at the top. */
.k4pg-prose-section--page {
	padding-top: 40px;
}

/* ═══════════════════════════════════════════
   3. Enquiry section, light (the end of an inner page)
   ═══════════════════════════════════════════ */
.k4hp-enquiry.k4hp-enquiry--light {
	padding: 56px 0 64px;
	background: var(--k4-cream);
	color: var(--k4-text);
	--k4hp-focus: var(--k4-ink);
}

.k4hp-enquiry--light .k4hp-proof--aside .k4hp-proof__quote {
	color: var(--k4-ink);
}

.k4hp-enquiry--light .k4hp-proof--aside .k4hp-proof__source {
	color: var(--k4-muted);
}

.k4hp-enquiry--light .k4hp-enquiry__call {
	color: var(--k4-ink);
	border-top-color: var(--k4-sand);
}

.k4hp-enquiry--light .k4hp-enquiry__call a {
	color: var(--k4-ink);
	text-decoration-color: var(--k4-gold);
}

.k4hp-enquiry--light .k4hp-enquiry__call span {
	color: var(--k4-muted);
}

/* The section's own heading above the card (1.6.0): the Typical Costs page's
   booking title and the editor's closing "…quote" text. */
.k4hp-page .k4pg-enquiry__intro + .k4pg-enquiry__intro {
	margin-top: 8px !important;
}

.k4pg-enquiry__intro a {
	color: var(--k4-gold-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A note under a form, for a page that passes one to the card. */
.k4hp-page .k4hp-quote__note {
	margin-top: 12px !important;
	font-size: 0.875rem;
	color: var(--k4-muted);
}

/* ═══════════════════════════════════════════
   4. Other Contact Form 7 forms in the card
   Not used by the current templates: since 1.7.0 every card shows the
   site's one enquiry form (K4 Landing Enquiry), styled in
   css/homepage-2026.css. Kept so that any other form placed in the card
   (k4hp_render_quote_card(), class "k4hp-form") still takes the landing
   form's look without the form being changed.
   ═══════════════════════════════════════════ */
.k4hp-page .k4hp-form {
	margin-top: 16px;
}

.k4hp-page .k4hp-form p {
	margin: 0 0 14px;
}

.k4hp-page .k4hp-form br {
	display: none;
}

.k4hp-page .k4hp-form label {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--k4-ink);
}

.k4hp-page .k4hp-form .wpcf7-form-control-wrap {
	display: block;
}

.k4hp-page .k4hp-form label .wpcf7-form-control-wrap {
	margin-top: 6px;
}

/* 16 px text in the boxes stops iOS Safari zooming the page on focus. */
.k4hp-page .k4hp-form input[type="text"],
.k4hp-page .k4hp-form input[type="tel"],
.k4hp-page .k4hp-form input[type="email"],
.k4hp-page .k4hp-form input[type="url"],
.k4hp-page .k4hp-form input[type="number"],
.k4hp-page .k4hp-form input[type="date"],
.k4hp-page .k4hp-form select,
.k4hp-page .k4hp-form textarea {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	font: inherit;
	font-size: 1rem;
	color: var(--k4-text);
	background: #ffffff;
	border: 1.5px solid #bfb5a8;
	border-radius: 12px;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.k4hp-page .k4hp-form textarea {
	min-height: 140px;
	line-height: 1.5;
	resize: vertical;
}

/* Placeholders are the only labels on the free appointment form, so they
   are dark enough to read (5.9:1 on white). */
.k4hp-page .k4hp-form ::placeholder {
	color: #6b635d;
	opacity: 1;
}

.k4hp-page .k4hp-form input:focus,
.k4hp-page .k4hp-form select:focus,
.k4hp-page .k4hp-form textarea:focus {
	outline: none;
	border-color: var(--k4-ink);
	box-shadow: 0 0 0 4px rgba(243, 175, 46, 0.45);
}

.k4hp-page .k4hp-form .wpcf7-not-valid,
.k4hp-page .k4hp-form input[type].wpcf7-not-valid {
	border-color: #a8231a;
}

.k4hp-page .k4hp-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #a8231a;
}

.k4hp-page .k4hp-form .wpcf7-turnstile {
	margin: 4px 0 14px;
}

.k4hp-page .k4hp-form .wpcf7-submit {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 14px 20px;
	font: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--k4-ink);
	background: var(--k4-gold);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 14px 28px -14px rgba(243, 175, 46, 0.95);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.k4hp-page .k4hp-form .wpcf7-submit:hover {
	background: var(--k4-gold-hover);
	transform: translateY(-1px);
}

.k4hp-page .k4hp-form .wpcf7-submit:disabled {
	cursor: wait;
	opacity: 0.8;
}

.k4hp-page .k4hp-form .wpcf7-spinner {
	display: none;
}

.k4hp-page .k4hp-form.submitting .wpcf7-spinner {
	display: block;
	margin: 10px auto 0;
}

.k4hp-page .k4hp-form .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.k4hp-page .k4hp-form .wpcf7-response-output a {
	color: inherit;
	font-weight: 800;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ═══════════════════════════════════════════
   5. About
   ═══════════════════════════════════════════ */
.k4pg-about__grid {
	display: grid;
	gap: 32px;
}

.k4pg-about__video.k4hp-video-card {
	width: 100%;
}

/* No local thumbnail: a plain panel with a play symbol (nothing from YouTube). */
.k4pg-about__video-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--k4-gold);
}

.k4pg-about__video-fallback .k4-icon {
	width: 64px;
	height: 64px;
}

.k4pg-about__list {
	margin-top: 18px !important;
}

.k4pg-about__points .k4hp-cta-group {
	margin-top: 26px;
}

/* ═══════════════════════════════════════════
   6. Contact
   ═══════════════════════════════════════════ */
.k4pg-contact__grid {
	display: grid;
	gap: 32px;
}

.k4pg-contact .k4hp-quote {
	max-width: none;
}

.k4hp-page .k4pg-contact__title {
	font-size: 1.25rem;
}

.k4pg-details {
	display: grid;
	gap: 12px;
	margin-top: 16px !important;
}

.k4pg-details__item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 18px;
	border-radius: var(--k4hp-radius);
	background: var(--k4-cream);
}

.k4pg-details__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--k4-ink);
	color: var(--k4-gold);
}

.k4pg-details__icon .k4-icon {
	width: 20px;
	height: 20px;
}

.k4hp-page .k4pg-details__label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k4-gold-deep);
}

.k4pg-details__link {
	display: inline-block;
	margin-top: 2px;
	font-weight: 700;
	color: var(--k4-ink);
	text-decoration: underline;
	text-decoration-color: var(--k4-gold);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.k4pg-details address,
.k4hp-page .k4pg-details p {
	margin-top: 2px !important;
	font-style: normal;
	color: var(--k4-text);
}

.k4pg-map iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
}

/* ═══════════════════════════════════════════
   7. Typical costs: plans and booking
   ═══════════════════════════════════════════ */
.k4pg-plans__grid,
.k4pg-doors__grid,
.k4pg-gallery__grid,
.k4pg-posts__grid {
	display: grid;
	gap: 18px;
}

.k4pg-plan,
.k4pg-door,
.k4pg-gallery__item figure,
.k4pg-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--k4hp-radius);
	background: #ffffff;
	box-shadow: 0 1px 0 var(--k4-sand), var(--k4hp-shadow);
}

/* The area pages link to each plan by its address; the fixed header must
   not cover the card's top when they do. */
.k4pg-plan {
	scroll-margin-top: calc(var(--k4-header-h) + 16px);
}

/* The plan's picture panel and the drawing link are in css/homepage-2026.css
   (section 11), shared with the homepage's cost cards since 1.5.0. */

.k4pg-plan__body,
.k4pg-door__body {
	padding: 20px 22px 24px;
}

.k4hp-page .k4pg-plan__title {
	font-size: 1.25rem;
}

.k4pg-plan__label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k4-gold-deep);
}

.k4hp-page .k4pg-plan__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 10px !important;
}

.k4pg-plan__price span {
	font-size: 0.8125rem;
	color: var(--k4-muted);
}

.k4pg-plan__price strong {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--k4-ink);
}

.k4hp-page .k4pg-plan__heading {
	margin-top: 16px;
	font-size: 0.9375rem;
	letter-spacing: 0;
}

.k4pg-plan__details {
	margin-top: 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* ── Plan cards with the price guide (1.3.0) ───
   The page editor's introduction above the cards; in each card, who the
   kitchen suits, what is included (worktop picked out) and a button to the
   appointment form; the guide-price note under the cards.
   Phones: cards one under another. Tablets (600–1023 px): each card on its
   side, drawing left, details right. Laptops: three across, with the price,
   "who it suits", list and button lined up from card to card. */
.k4pg-plans__intro {
	max-width: 46em;
	margin-top: 14px;
}

.k4hp-page .k4pg-plans__intro p {
	margin-top: 10px !important;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--k4-muted);
}

.k4hp-page .k4pg-plans__intro p:first-child {
	margin-top: 0 !important;
	font-size: 1.0625rem;
	color: var(--k4-text);
}

/* The site loads only the heavy (800) italic, so italic words in ordinary
   text would come out as heavy bold italic. The quoted question keeps its
   quotation marks and is set upright instead. */
.k4pg-plans__intro :is(i, em) {
	font-style: normal;
}

.k4pg-plan__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Who the kitchen suits: K4's own sentence from the price guide. */
.k4hp-page .k4pg-plan__ideal {
	margin-top: 14px !important;
	padding: 11px 14px;
	border-left: 3px solid var(--k4-gold);
	border-radius: 0 12px 12px 0;
	background: var(--k4-cream);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--k4-text);
}

.k4pg-plan__includes {
	display: grid;
	gap: 8px;
	margin-top: 10px !important;
}

.k4pg-plan__includes li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.k4pg-plan__includes .k4-icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--k4-gold-deep);
}

/* The worktop: what most sets the three kitchens apart. */
.k4pg-plan__includes li.is-key span {
	font-weight: 700;
	color: var(--k4-ink);
}

.k4pg-plan__cta {
	width: 100%;
	margin-top: 22px;
}

.k4hp-page .k4pg-plans__note {
	max-width: 46em;
	margin: 22px auto 0 !important;
	font-size: 0.875rem;
	text-align: center;
	color: var(--k4-muted);
}

/* Tablets: each card on its side. (Stronger than the two-column grid set
   for 768 px further down.) */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.k4pg-plans .k4pg-plans__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.k4pg-plans .k4pg-plan {
		display: grid;
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	}

	/* The drawing's panel runs the full height of the card, the drawing
	   centred in it. */
	.k4pg-plans .k4pg-plan__image--drawing {
		aspect-ratio: auto;
		min-height: 280px;
		height: 100%;
		padding: 18px 18px 56px;
	}

	.k4pg-plan__body {
		padding: 24px 26px 26px;
	}
}

/* Laptops: three across. Each card borrows the grid's rows (subgrid), so
   the same parts line up from card to card whatever their length. */
@media (min-width: 1024px) {
	.k4pg-plans .k4pg-plans__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 22px;
		row-gap: 0;
	}

	.k4pg-plans .k4pg-plan {
		display: grid;
		grid-row: span 7;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.k4pg-plans .k4pg-plan > .k4pg-plan__image {
		grid-row: 1;
	}

	.k4pg-plans .k4pg-plan__body {
		display: grid;
		grid-row: 2 / span 6;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.k4pg-plan__body > .k4pg-plan__title {
		grid-row: 1;
	}

	.k4pg-plan__body > .k4pg-plan__price {
		grid-row: 2;
	}

	.k4pg-plan__body > .k4pg-plan__ideal {
		grid-row: 3;
		align-self: stretch;
	}

	.k4pg-plan__body > .k4pg-plan__heading {
		grid-row: 4;
	}

	.k4pg-plan__body > .k4pg-plan__includes,
	.k4pg-plan__body > .k4pg-plan__details {
		grid-row: 5;
		align-self: start;
	}

	.k4pg-plan__body > .k4pg-plan__cta {
		grid-row: 6;
		align-self: end;
	}
}

/* ── General text section (1.4.0) ──────────────
   The Typical Costs page's general text after the plans, set out instead of
   printed as plain text: a section with a list becomes text beside a
   numbered list in a card; one without a list becomes a charcoal feature
   panel. Cream, between the white plans and the charcoal reviews. */
.k4pg-info {
	background: var(--k4-cream);
}

.k4pg-info__inner {
	display: grid;
	gap: 40px;
}

.k4pg-info__split {
	display: grid;
	gap: 26px;
}

.k4hp-page .k4pg-info__text p {
	margin-top: 14px !important;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--k4-muted);
}

/* After the list: the promise that follows it, picked out. */
.k4hp-page .k4pg-info__closing p {
	margin-top: 10px !important;
	padding: 14px 16px;
	font-size: 1.0625rem;
	line-height: 1.65;
	border-left: 3px solid var(--k4-gold);
	border-radius: 0 12px 12px 0;
	background: #ffffff;
	color: var(--k4-text);
}

/* The factors in a white card, numbered. The numbers are decoration: the
   second content value gives them no text for screen readers. */
.k4pg-info__factors {
	counter-reset: k4pg-factor;
	align-self: start;
	padding: 6px 22px;
	border-radius: var(--k4hp-radius);
	background: #ffffff;
	box-shadow: 0 1px 0 var(--k4-sand), var(--k4hp-shadow);
}

.k4pg-info__factors li {
	counter-increment: k4pg-factor;
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 15px 0;
	border-top: 1px solid var(--k4-sand);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--k4-ink);
}

.k4pg-info__factors li:first-child {
	border-top: 0;
}

.k4pg-info__factors li::before {
	content: counter(k4pg-factor, decimal-leading-zero);
	content: counter(k4pg-factor, decimal-leading-zero) / "";
	flex: none;
	min-width: 2.2ch;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--k4-gold-deep);
}

/* A section without a list: a charcoal feature panel, with the gold glow
   the page headings used to have. */
.k4pg-info__callout {
	position: relative;
	display: grid;
	gap: 14px;
	overflow: hidden;
	padding: 30px 24px 32px;
	border-radius: var(--k4hp-radius-lg);
	background: var(--k4-ink);
	color: #ffffff;
	--k4hp-focus: var(--k4-gold);
}

.k4pg-info__callout::before {
	content: "";
	position: absolute;
	top: -60%;
	right: -20%;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(243, 175, 46, 0.18), rgba(243, 175, 46, 0) 65%);
	pointer-events: none;
}

.k4pg-info__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(243, 175, 46, 0.14);
	color: var(--k4-gold);
}

.k4pg-info__icon .k4-icon {
	width: 26px;
	height: 26px;
}

.k4hp-page .k4pg-info__callout-title {
	position: relative;
	font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
	color: #ffffff;
	text-wrap: balance;
}

.k4pg-info__callout-body {
	position: relative;
}

.k4hp-page .k4pg-info__callout-body p {
	margin-top: 12px !important;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.86);
}

.k4hp-page .k4pg-info__callout-body p:first-child {
	margin-top: 0 !important;
}

.k4pg-info__callout a {
	color: var(--k4-gold);
}

@media (min-width: 1024px) {
	.k4pg-info__inner {
		gap: 56px;
	}

	/* The list on the right; the lead-in above the closing text on the
	   left, the pair centred against the list. */
	.k4pg-info__split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		grid-template-areas:
			"text list"
			"closing list";
		grid-template-rows: 1fr 1fr;
		column-gap: 64px;
		row-gap: 0;
	}

	.k4pg-info__text {
		grid-area: text;
		align-self: end;
	}

	.k4pg-info__factors {
		grid-area: list;
		align-self: center;
		padding: 10px 32px;
	}

	.k4pg-info__closing {
		grid-area: closing;
		align-self: start;
		padding-top: 22px;
	}

	/* Nothing after the list (if the editor text changes): one row, with
	   the lead-in centred against the list rather than above an empty half. */
	.k4pg-info__split--no-closing {
		grid-template-areas: "text list";
		grid-template-rows: auto;
	}

	.k4pg-info__split--no-closing .k4pg-info__text {
		align-self: center;
	}

	/* Icon, heading and text side by side. */
	.k4pg-info__callout {
		grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.3fr);
		align-items: start;
		column-gap: 32px;
		padding: 48px 52px;
	}

	.k4pg-info__callout-body {
		padding-top: 4px;
	}
}

/* ── Plan drawings and the pop-up (1.1.0) ────────
   Moved to css/homepage-2026.css, section 11 (1.5.0): the homepage's cost
   cards show the same drawings, and the homepage does not load this file.
   The Typical Costs cards' own layout around the drawing stays above. */

/* ═══════════════════════════════════════════
   8. Pricing: door styles and what the prices cover
   ═══════════════════════════════════════════ */
.k4pg-door__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.k4hp-page .k4pg-door__title {
	font-size: 1.25rem;
}

.k4pg-door__lines {
	display: grid;
	gap: 4px;
	margin-top: 10px !important;
	font-size: 0.9375rem;
}

.k4pg-door__lines .k4pg-door__price {
	margin-top: 8px;
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--k4-ink);
}

.k4pg-features {
	background: var(--k4-cream);
}

.k4pg-features__grid {
	display: grid;
	gap: 10px;
}

.k4pg-feature {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 14px;
	background: #ffffff;
	font-weight: 600;
	line-height: 1.45;
	color: var(--k4-ink);
}

.k4pg-feature .k4-icon {
	flex: none;
	width: 24px;
	height: 24px;
	padding: 4px;
	border-radius: 50%;
	background: var(--k4-gold);
	color: var(--k4-ink);
}

/* ═══════════════════════════════════════════
   9. Journey: numbered timeline
   ═══════════════════════════════════════════ */
.k4pg-journey__inner {
	max-width: calc(860px + 2 * var(--k4hp-gutter));
}

.k4pg-journey__steps {
	position: relative;
	display: grid;
	gap: 14px;
}

/* The line that joins the numbers. */
.k4pg-journey__steps::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 23px;
	width: 2px;
	background: var(--k4-sand);
}

.k4pg-journey__step {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.k4pg-journey__number {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--k4-ink);
	color: var(--k4-gold);
	font-weight: 800;
	font-style: italic;
}

.k4pg-journey__body {
	padding: 16px 20px 18px;
	border-radius: var(--k4hp-radius);
	background: var(--k4-cream);
}

.k4hp-page .k4pg-journey__title {
	font-size: 1.0625rem;
	line-height: 1.3;
}

.k4hp-page .k4pg-journey__body p {
	margin-top: 6px !important;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.k4pg-journey-map__image {
	width: 100%;
	height: auto;
	border-radius: var(--k4hp-radius);
}

/* ═══════════════════════════════════════════
   10. Transformation: before and after
   (the transformation-slider classes are js/transformation-slider.js's own)
   1.8.0: redesigned. Phones and tablets: heading, slider, points and buttons
   one under another. From 900 px: the text on the left and the slider on
   the right, the two centred against each other. The slider is a portrait
   card no wider than 440 px, because its photographs are only 600 x 800 px
   (at the old width, about 710 px, they were stretched and blurred).
   ═══════════════════════════════════════════ */
.k4pg-compare__grid {
	display: grid;
	grid-template-areas:
		"head"
		"media"
		"points"
		"actions";
	row-gap: 32px;
}

.k4pg-compare__head {
	grid-area: head;
}

.k4hp-page .k4pg-compare__lead {
	max-width: 34em;
	margin-top: 12px !important;
}

/* The card sits on a cream mount, offset down and to the right. The mount
   stays inside the box's own padding, so it never widens the page. */
.k4pg-compare__media {
	grid-area: media;
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 454px;
	padding: 0 14px 14px 0;
}

.k4pg-compare__media::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 0;
	bottom: 0;
	left: 14px;
	border-radius: var(--k4hp-radius-lg);
	background: var(--k4-cream);
}

.transformation-slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--k4hp-radius-lg);
	background: var(--k4-ink);
	box-shadow: 0 26px 50px -28px rgba(27, 24, 25, 0.55);
	cursor: ew-resize;
	-webkit-user-select: none;
	user-select: none;
	/* Up-and-down swipes still scroll the page on phones. */
	touch-action: pan-y;
}

.transformation-slider__after img {
	display: block;
	width: 100%;
	height: auto;
}

.transformation-slider__before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50%;
	overflow: hidden;
}

/* The script sets this photograph's width to the slider's, so it does not
   shrink as its box narrows. */
.transformation-slider__before img {
	display: block;
	max-width: none;
	height: 100% !important;
	object-fit: cover;
}

.transformation-slider__label {
	position: absolute;
	top: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(27, 24, 25, 0.82);
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.transformation-slider__label--before {
	left: 14px;
}

/* "After" in gold: the result is the point of the picture. */
.transformation-slider__label--after {
	right: 14px;
	background: var(--k4-gold);
	color: var(--k4-ink);
}

.transformation-slider__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 48px;
	margin-left: -24px;
	cursor: ew-resize;
}

.transformation-slider__handle:focus {
	outline: none;
}

.transformation-slider__handle-line {
	flex: 1;
	width: 3px;
	background: #ffffff;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.transformation-slider__handle-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 3px solid #ffffff;
	border-radius: 50%;
	background: var(--k4-gold);
	color: var(--k4-ink);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.transformation-slider__handle-circle .k4-icon {
	width: 18px;
	height: 18px;
}

.transformation-slider__handle:focus-visible .transformation-slider__handle-circle {
	outline: 3px solid var(--k4-ink);
	outline-offset: 2px;
}

/* The points: a line icon in a charcoal circle, the words beside it, a fine
   rule between them. */
.k4pg-compare__points {
	grid-area: points;
	display: grid;
}

.k4pg-compare__point {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--k4-ink);
}

.k4pg-compare__point + .k4pg-compare__point {
	border-top: 1px solid var(--k4hp-line);
}

.k4pg-compare__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--k4-ink);
	color: var(--k4-gold);
}

.k4pg-compare__icon .k4-icon {
	width: 24px;
	height: 24px;
}

/* A picture chosen in wp-admin instead of the theme's icon. */
.k4pg-compare__icon--picture {
	overflow: hidden;
	background: var(--k4-cream);
}

.k4pg-compare__icon--picture img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.k4pg-compare__actions {
	grid-area: actions;
}

/* From 600 px the button pair sits side by side. In the text column it may
   wrap instead, so the call button never runs under the slider where the
   column is narrow. (Below 600 px the buttons are stacked, full width.) */
@media (min-width: 600px) {
	.k4pg-compare__actions .k4hp-ctas {
		display: flex;
		flex-wrap: wrap;
	}
}

@media (min-width: 900px) {
	/* Text left, slider right. The empty first and last rows share the spare
	   height, so the text sits centred against the taller slider. */
	.k4pg-compare__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 462px);
		grid-template-rows: 1fr auto auto auto 1fr;
		grid-template-areas:
			".       media"
			"head    media"
			"points  media"
			"actions media"
			".       media";
		column-gap: clamp(48px, 7vw, 104px);
		row-gap: 0;
	}

	.k4pg-compare__head,
	.k4pg-compare__points,
	.k4pg-compare__actions {
		max-width: 540px;
	}

	.k4pg-compare__points {
		margin-top: 22px;
	}

	.k4pg-compare__actions {
		margin-top: 30px;
	}

	/* Centred, not stretched: where the text is the taller side, a stretched
	   box would pull the cream mount down below the card. */
	.k4pg-compare__media {
		align-self: center;
		justify-self: end;
		max-width: 462px;
		padding: 0 22px 22px 0;
	}

	.k4pg-compare__media::before {
		top: 22px;
		left: 22px;
	}
}

/* Small laptops (900–1199 px): a slightly smaller slider, so the text column
   keeps a comfortable width. */
@media (min-width: 900px) and (max-width: 1199.98px) {
	.k4pg-compare__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 398px);
	}

	.k4pg-compare__media {
		max-width: 398px;
		padding: 0 18px 18px 0;
	}

	.k4pg-compare__media::before {
		top: 18px;
		left: 18px;
	}
}

/* ═══════════════════════════════════════════
   11. Kitchens with alterations: gallery
   ═══════════════════════════════════════════ */
.k4pg-gallery__item {
	display: flex;
}

.k4pg-gallery__item figure {
	flex: 1;
	margin: 0;
}

.k4pg-gallery__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.k4pg-gallery__item figcaption {
	padding: 16px 18px 20px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--k4-text);
}

/* ═══════════════════════════════════════════
   12. Blog: post cards and page links
   ═══════════════════════════════════════════ */
.k4pg-post-card {
	position: relative;
}

.k4pg-post-card__image {
	aspect-ratio: 16 / 10;
	background: var(--k4-ink);
}

.k4pg-post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.k4pg-post-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 2.5rem;
	font-weight: 800;
	font-style: italic;
	color: var(--k4-gold);
}

.k4pg-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px 20px 20px;
}

.k4hp-page .k4pg-post-card__category {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k4-gold-deep);
}

.k4hp-page .k4pg-post-card__title {
	margin-top: 6px;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.k4pg-post-card__title a {
	color: var(--k4-ink);
	text-decoration: none;
}

/* The whole card is the link's target area; the title is the link text. */
.k4pg-post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.k4pg-post-card__title a:hover,
.k4pg-post-card__title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--k4-gold);
	text-underline-offset: 3px;
}

.k4hp-page .k4pg-post-card__excerpt {
	margin-top: 8px !important;
	font-size: 0.9375rem;
	color: var(--k4-muted);
}

.k4hp-page .k4pg-post-card__meta {
	margin-top: auto !important;
	padding-top: 12px;
	font-size: 0.8125rem;
	color: var(--k4-muted);
}

.k4pg-posts__empty {
	text-align: center;
	color: var(--k4-muted);
}

.k4pg-pagination ul,
.k4pg-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 32px !important;
}

.k4pg-pagination a,
.k4pg-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--k4-sand);
	border-radius: 999px;
	font-weight: 600;
	color: var(--k4-ink);
	text-decoration: none;
}

.k4pg-pagination .current {
	border-color: var(--k4-ink);
	background: var(--k4-ink);
	color: #ffffff;
}

/* ═══════════════════════════════════════════
   13. A blog post
   ═══════════════════════════════════════════ */
.k4pg-article__inner {
	max-width: calc(820px + 2 * var(--k4hp-gutter));
}

.k4pg-article .k4pg-prose {
	max-width: none;
}

.k4pg-article__image {
	margin: 0 0 28px !important;
}

.k4pg-article__image img {
	width: 100%;
	height: auto;
	border-radius: var(--k4hp-radius-lg);
}

.k4pg-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px !important;
}

.k4pg-article__tags a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--k4-cream);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--k4-ink);
	text-decoration: none;
}

.k4pg-article__author {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 32px;
	padding: 20px;
	border-radius: var(--k4hp-radius);
	background: var(--k4-cream);
}

.k4pg-article__author img {
	flex: none;
	border-radius: 50%;
}

.k4hp-page .k4pg-article__author-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k4-gold-deep);
}

.k4hp-page .k4pg-article__author-name {
	font-weight: 800;
	color: var(--k4-ink);
}

.k4pg-article__nav {
	display: grid;
	gap: 12px;
	margin-top: 36px;
}

.k4pg-article__nav-link {
	display: block;
	padding: 16px 18px;
	border: 1.5px solid var(--k4-sand);
	border-radius: var(--k4hp-radius);
	color: var(--k4-ink);
	text-decoration: none;
}

.k4pg-article__nav-link:hover {
	border-color: var(--k4-gold);
}

.k4pg-article__nav-label {
	display: block;
	font-size: 0.8125rem;
	color: var(--k4-muted);
}

.k4pg-article__nav-title {
	display: block;
	margin-top: 2px;
	font-weight: 700;
}

/* ═══════════════════════════════════════════
   14. Not found
   ═══════════════════════════════════════════ */
.k4pg-notfound__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ═══════════════════════════════════════════
   15. Plain pages: no button bar, so no room kept for it under the footer
   ═══════════════════════════════════════════ */
@media (max-width: 1023.98px) {
	.k4hp-page.k4pg-plain .k4-footer {
		padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
	}
}

/* ═══════════════════════════════════════════
   Larger phones and small tablets
   ═══════════════════════════════════════════ */
@media (min-width: 600px) {
	.k4pg-features__grid,
	.k4pg-gallery__grid,
	.k4pg-posts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.k4pg-article__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.k4pg-article__nav-link--next {
		grid-column: 2;
		text-align: right;
	}
}

/* ═══════════════════════════════════════════
   Tablets
   ═══════════════════════════════════════════ */
@media (min-width: 768px) {
	.k4pg-hero {
		padding: 56px 0 64px;
	}

	.k4pg-hero--compact {
		padding: 44px 0 52px;
	}

	.k4pg-plans__grid,
	.k4pg-doors__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.k4hp-enquiry.k4hp-enquiry--light {
		padding: 72px 0 88px;
	}
}

/* ═══════════════════════════════════════════
   Laptops
   ═══════════════════════════════════════════ */
@media (min-width: 1024px) {
	.k4pg-hero {
		padding: 72px 0 80px;
	}

	.k4pg-hero--compact {
		padding: 56px 0 64px;
	}

	.k4pg-about__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
		gap: 56px;
	}

	.k4pg-contact__grid {
		grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
		align-items: start;
		gap: 56px;
	}

	/* The contact page has no side panel with the customer's words, so they
	   stay under the details on laptops too. */
	.k4pg-contact__details .k4hp-proof--card {
		display: block;
	}

	.k4pg-plans__grid,
	.k4pg-doors__grid,
	.k4pg-features__grid,
	.k4pg-gallery__grid,
	.k4pg-posts__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.k4hp-enquiry.k4hp-enquiry--light {
		padding: 88px 0 96px;
	}
}