/* Task Home theme styles that theme.json can't express. Values match the Figma file. */

/* Eyebrow label: Label/Eyebrow text style */
.is-style-eyebrow {
	color: var(--wp--preset--color--green);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.8px;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Chip: quick link to a service or area */
.wp-block-button.is-style-chip .wp-block-button__link {
	background: var(--wp--preset--color--white);
	/* Dark grey frame, like TaskRabbit's task buttons. */
	border: 1px solid #585C5B;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 8px 14px;
}
.wp-block-button.is-style-chip .wp-block-button__link:hover {
	background: var(--wp--preset--color--green-tint);
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* Card: white tile with soft shadow */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--card);
}

/* Header */
.th-header {
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}
.th-logo img {
	/* Same shape as the logo file, so the header keeps its height while it loads. */
	aspect-ratio: 469.4 / 104;
	display: block;
	height: auto;
}
.th-title-long {
	/* A title with a very long word (functions.php) shrinks with the screen, so the word fits on a phone. */
	font-size: min(var(--wp--preset--font-size--h-1), 8.8vw);
}
.th-header .th-lang,
.th-header .th-phone {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.th-header .th-lang {
	color: var(--wp--preset--color--muted);
}
.th-header .th-lang .th-lang__current {
	color: var(--wp--preset--color--ink);
}
.th-header .th-phone a {
	color: var(--wp--preset--color--ink);
}

/* Collapse the menu into the burger below 1024px (core only does it below 600px) */
@media (max-width: 1023px) {
	.th-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.th-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.th-header .th-phone {
		display: none;
	}
}

/* Small laptops: German menu labels are longer, so tighten the menu and leave
   the phone number to the footer until the header has room (1280px). */
@media (min-width: 1024px) and (max-width: 1279px) {
	.th-header .wp-block-navigation,
	.th-header .wp-block-navigation .wp-block-navigation__container {
		gap: 18px !important;
	}
	.th-header .th-phone {
		display: none;
	}
}
.th-header-cta .wp-block-button__link {
	white-space: nowrap;
}

/* Hero search bar */
.th-search {
	background: var(--wp--preset--color--white);
	border: 1px solid #585C5B;
	border-radius: 999px;
	box-shadow: var(--wp--preset--shadow--card);
	max-width: 560px;
	padding: 8px 8px 8px 20px;
}
.th-search .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
}
.th-search .wp-block-search__input {
	border: 0;
	color: var(--wp--preset--color--ink);
	font-size: 17px;
	min-width: 0;
	padding: 0;
}
.th-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}
.th-search .wp-block-search__button {
	margin-left: 8px;
	white-space: nowrap;
}

/* Trust row under the hero */
.th-trust p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin: 0;
}

/* Home hero: centred headline and search above the service tabs */
.th-hero-head h1 {
	font-size: clamp(28px, 2.2vw + 12px, 42px);
	text-wrap: balance;
}
.th-hero-head .th-hero-lead {
	margin-inline: auto;
	max-width: 640px;
}
.th-hero-head .th-search {
	margin-inline: auto;
	max-width: 640px;
}

/* Estimate card */
.th-estimate {
	border-radius: 18px;
	box-shadow: var(--wp--preset--shadow--float);
	max-width: 253px;
}
.th-estimate .th-price {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}

/* Footer */
.th-footer {
	border-top: 1px solid var(--wp--preset--color--border-subtle);
}
.th-footer a {
	color: var(--wp--preset--color--ink);
}
.th-footer a:hover {
	color: var(--wp--preset--color--green);
}
.th-footer .th-footer-legal {
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Mobile: search becomes a box plus a full-width button, sticky quote bar at the bottom */
@media (min-width: 600px) {
	.th-sticky-quote {
		display: none !important;
	}
}
@media (max-width: 599px) {
	.th-header .th-header-cta {
		display: none;
	}
	.th-search {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
	}
	.th-search .wp-block-search__inside-wrapper {
		flex-direction: column;
		gap: 18px;
	}
	.th-search .wp-block-search__input {
		background: var(--wp--preset--color--white);
		/* Dark enough (3.5:1) to see the field on a phone, like the request form. */
		border: 1px solid #868a87;
		border-radius: 14px;
		font-size: 16px;
		padding: 15px 14px;
		width: 100%;
	}
	.th-search .wp-block-search__button {
		border-radius: 14px;
		margin-left: 0;
		width: 100%;
	}
	.th-sticky-quote {
		background: var(--wp--preset--color--white);
		border-top: 1px solid var(--wp--preset--color--border-subtle);
		bottom: 0;
		display: flex;
		left: 0;
		position: fixed;
		right: 0;
		z-index: 50;
	}
	.th-sticky-quote .wp-block-button__link {
		border-radius: 12px;
	}
	body {
		padding-bottom: 71px;
	}
}

/* Header, main and footer sit flush; sections bring their own spacing */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}
main.wp-block-group > .alignfull:first-child {
	margin-block-start: 0;
}

@media (max-width: 1023px) {
	.th-header .wp-block-navigation {
		order: 3;
	}
	.th-header .th-header-actions {
		margin-left: auto;
	}
}

/* Show or hide a block on phones only (below 600px) */
@media (max-width: 599px) {
	.th-hide-mobile {
		display: none !important;
	}
}
@media (min-width: 600px) {
	.th-show-mobile {
		display: none !important;
	}
}

/* "See more →" links */
.th-more {
	font-weight: 600;
	line-height: 1.2;
}
.th-more a {
	color: inherit;
}
.th-more a:hover {
	text-decoration: underline;
}
p.th-more:not(.has-text-color) a {
	color: var(--wp--preset--color--green);
}

/* Service lanes: small tasks and renovation projects */
.th-lane {
	border-radius: 24px;
	padding: clamp(22px, 3vw, 36px);
}
.th-lane > * {
	margin-block: 0;
}
.th-lane > * + * {
	margin-block-start: 16px;
}
.th-lane .is-style-eyebrow + * {
	margin-block-start: 10px;
}

/* Service card: a compact tile with the icon above the name and price.
   The whole tile is clickable through the name link. */
.th-service-card {
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	padding: 20px 12px 18px;
	position: relative;
	text-align: center;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.th-service-card:hover {
	border-color: var(--wp--preset--color--green);
	box-shadow: var(--wp--preset--shadow--card);
}
.th-service-card > * {
	margin-block: 0;
}
.th-icon {
	align-items: center;
	background: var(--wp--preset--color--border-subtle);
	border-radius: 14px;
	display: flex;
	height: 48px;
	justify-content: center;
	margin-bottom: 14px !important;
	width: 48px;
}
.th-icon img {
	display: block;
}
.th-service-card .th-icon {
	background: var(--wp--preset--color--border-subtle);
	border-radius: 46% 54% 42% 58% / 56% 44% 56% 44%;
	height: 72px;
	margin-bottom: 10px !important;
	transition: background-color 0.15s;
	width: 78px;
}
/* Black and white only: the icon turns white on a black blob and moves (core blocks.css). */
.th-service-card:hover .th-icon {
	background: var(--wp--preset--color--ink);
}
.th-service-card:hover .th-icon svg {
	color: var(--wp--preset--color--white);
}
.th-service-card:hover .th-icon-fill {
	fill: var(--wp--preset--color--ink);
}
.th-service-card .th-icon svg {
	height: 44px;
	width: 44px;
}
.th-service-card .th-icon path {
	stroke-width: 1.5;
}
.th-service-name {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}
.th-service-name a {
	color: var(--wp--preset--color--ink);
}
.th-service-name a::after {
	border-radius: 16px;
	content: "";
	inset: 0;
	position: absolute;
}
.th-service-name a:hover {
	text-decoration: none;
}
.th-service-name a:focus-visible {
	outline: none;
}
.th-service-card:focus-within {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 2px;
}
.th-service-price {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	margin-top: 2px !important;
}
.th-all-services {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.th-all-services .th-service-name a {
	color: var(--wp--preset--color--green);
}

/* How it works: numbered steps */
.th-step > * {
	margin-block: 0;
}
.th-step > * + * {
	margin-block-start: 12px;
}
.th-step-num {
	align-items: center;
	/* Yellow and ink, like the logo. */
	background: var(--wp--preset--color--gold);
	border-radius: 46% 54% 42% 58% / 56% 44% 56% 44%;
	color: var(--wp--preset--color--ink);
	display: flex;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 21px;
	font-weight: 700;
	height: 48px;
	justify-content: center;
	line-height: 1;
	position: relative;
	width: 52px;
	z-index: 1;
}
.th-step h3 {
	margin-block-start: 16px;
}

/* Price calculator band */
.th-calc-band {
	border-radius: 28px;
	padding: clamp(24px, 4vw, 48px);
}
.th-calc-band h2 {
	font-size: clamp(28px, 2.6vw, 38px);
}
.th-calc-preview {
	border: 1px solid var(--wp--preset--color--photo);
	border-radius: 20px;
	padding: 24px;
}
.th-calc-preview > * {
	margin-block: 0;
}
.th-calc-preview > * + * {
	margin-block-start: 4px;
}
.th-calc-preview p {
	margin: 0;
}
.th-calc-row {
	border-bottom: 1px solid var(--wp--preset--color--photo);
	padding: 10px 0;
}
.th-calc-total {
	padding-top: 8px;
}
.th-stepper {
	align-items: center;
	display: flex;
	font-weight: 600;
	gap: 12px;
	line-height: 1.2;
}
.th-stepper span {
	align-items: center;
	border: 1px solid var(--wp--preset--color--photo);
	border-radius: 999px;
	display: flex;
	font-weight: 400;
	height: 32px;
	justify-content: center;
	width: 32px;
}
.th-calc-total .th-price {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

/* Review cards */
.th-review {
	border: 1px solid var(--wp--preset--color--photo);
	border-radius: 18px;
	padding: 24px;
}
.th-review > * {
	margin-block: 0;
}
.th-review > * + * {
	margin-block-start: 14px;
}
.th-stars {
	color: var(--wp--preset--color--gold);
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
}

/* Phones: stacked steps with the number on the left, full-width buttons */
@media (max-width: 599px) {
	.th-step {
		column-gap: 14px;
		display: grid;
		grid-template-columns: 32px 1fr;
	}
	.th-step > * + * {
		margin-block-start: 0;
	}
	.th-step-num {
		font-size: 16px;
		grid-row: span 2;
		height: 32px;
		width: 32px;
	}
	.th-step h3 {
		align-self: center;
		font-size: 18px;
		margin: 0;
	}
	.th-step p:not(.th-step-num) {
		grid-column: 2;
		margin-top: 4px;
	}
	.th-how .wp-block-group.is-layout-grid {
		gap: 20px;
	}
	.th-calc-cta .wp-block-button,
	.th-cta .wp-block-button {
		width: 100%;
	}
	.th-service-card {
		padding: 16px 8px 14px;
	}
	.th-service-card .th-icon svg {
		height: 38px;
		width: 38px;
	}
	.th-service-name {
		font-size: 15px;
	}
}

/* Page titles on service, group and overview pages */
.th-service-title,
.th-page-title {
	font-size: clamp(34px, 4vw, 52px);
	letter-spacing: -1.5px;
	line-height: 1.05;
}
.wp-block-post-terms.is-style-eyebrow a {
	color: inherit;
}

/* Service page: content column and the sticky price card */
.th-service-main > * {
	margin-block: 0;
}
.th-service-main > * + * {
	margin-block-start: 16px;
}
.th-service-main .wp-block-post-content > * {
	margin-block: 0;
}
.th-service-main .wp-block-post-content > * + * {
	margin-block-start: 28px;
}
.th-service-main .wp-block-post-content > .th-rating {
	margin-block-start: -12px;
}
.th-rating {
	align-items: center;
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	gap: 8px;
}
.th-rating .th-stars {
	font-size: 16px;
}
.th-service-photo {
	min-height: clamp(220px, 30vw, 380px) !important;
}

/* Check and dash lists (What's included / Not included) */
.wp-block-list.is-style-checks,
.wp-block-list.is-style-dashes {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}
.is-style-checks li,
.is-style-dashes li {
	padding-left: 24px;
	position: relative;
}
.is-style-checks li::before,
.is-style-dashes li::before {
	font-weight: 600;
	left: 0;
	position: absolute;
}
.is-style-checks li::before {
	color: var(--wp--preset--color--green);
	content: "✓";
}
.is-style-dashes li::before {
	color: var(--wp--preset--color--muted);
	content: "–";
}
.th-included {
	gap: 28px 32px;
}
.th-included h3 {
	margin: 0;
}

/* Short "How it works" box on service pages */
.th-mini-steps {
	border-radius: 20px;
	padding: 28px;
}
.th-mini-steps > * {
	margin-block: 0;
}
.th-mini-steps > * + * {
	margin-block-start: 16px;
}
.th-mini-step > * {
	margin: 0;
}
.th-mini-step > * + * {
	margin-top: 8px;
}
.th-mini-step .th-step-num {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 16px;
	font-weight: 600;
	height: 32px;
	width: 32px;
}
.th-mini-step__title {
	font-weight: 600;
	line-height: 1.2;
}

/* FAQ */
.th-faq-list > * {
	margin-block: 0;
}
.th-faq-list > h2 {
	margin-bottom: 8px;
}
.th-faq {
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
	padding: 18px 0;
}
.th-faq summary {
	cursor: pointer;
	display: flex;
	font-weight: 600;
	gap: 16px;
	justify-content: space-between;
	line-height: 1.3;
	list-style: none;
}
.th-faq summary::-webkit-details-marker {
	display: none;
}
.th-faq summary::after {
	color: var(--wp--preset--color--green);
	content: "+";
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
}
.th-faq[open] summary::after {
	content: "−";
}
.th-faq > p {
	margin: 8px 0 0;
}

/* Quote request page */
.th-quote-page {
	min-height: 100vh;
}
.th-quote-logo {
	padding-top: 8px;
}
@media (min-width: 768px) {
	.th-quote-page {
		background: var(--wp--preset--color--white) !important;
		padding-bottom: 0 !important;
		padding-top: 0 !important;
	}
	.th-quote-logo {
		display: none !important;
	}
	.th-quote-page > .wp-block-post-content {
		max-width: none !important;
	}
}
@media (max-width: 599px) {
	.th-quote-page {
		background: var(--wp--preset--color--white) !important;
	}
	.th-quote-logo {
		display: none !important;
	}
	.th-quote-page > .th-quote-logo + * {
		margin-block-start: 0;
	}
}

/* Areas: area cards, the quarters list and the Hamburg districts */
.th-area-card {
	position: relative;
	transition: border-color 0.15s;
}
.th-area-card:hover {
	border-color: var(--wp--preset--color--green);
}
.th-area-card > * {
	margin-block: 0;
}
.th-area-card > * + * {
	margin-block-start: 8px;
}
.th-area-card__title {
	letter-spacing: 0;
}
.th-area-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.th-area-card__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}
.th-area-card:focus-within {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 2px;
}
.th-area-card__title a:focus {
	outline: none;
}
.th-area-main .wp-block-post-content > * + * {
	margin-block-start: 20px;
}
.th-quarters {
	column-gap: 32px;
	columns: 3 140px;
	list-style: none;
	padding-left: 0;
}
.th-quarters li {
	break-inside: avoid;
	padding: 4px 0;
}
/* Area page: questions and the places nearby, under the service cards. */
.th-area-more {
	display: grid;
	gap: 48px;
	margin-top: 32px;
}
.th-area-more__faq,
.th-area-more__nearby {
	max-width: 760px;
}
.th-area-more__nearby h2 {
	margin: 0 0 16px;
}
.th-area-chips {
	gap: 10px;
}
.th-districts {
	padding-left: 0;
	list-style: none;
}
.th-districts li {
	padding: 6px 0;
}

/* How it works: booking cards keep their buttons on one line at the bottom */
.th-book-card {
	height: 100%;
}
.th-book-card > * {
	margin-block: 0;
}
.wp-block-post-template > li > .th-area-card {
	box-sizing: border-box;
	height: 100%;
}

/* Logo yellow as the accent on dark boxes: the label above the violet card
   (light yellow, which stays readable on violet) and the button in the dark
   quote band. Set here, not in the block markup, so pages saved earlier pick
   it up too. */
.th-lane.has-ink-background-color .is-style-eyebrow {
	color: var(--wp--preset--color--gold-soft) !important;
}
.th-calc-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--ink) !important;
}
.th-calc-cta .wp-block-button__link:hover,
.th-calc-cta .wp-block-button__link:focus-visible {
	background-color: #FFD34D !important;
}

/* Photo at the top of each service lane card */
.th-lane .th-lane-photo {
	border-radius: 16px;
	margin: 0 0 22px;
	overflow: hidden;
}
.th-lane .th-lane-photo img {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}
.th-lane .th-lane-photo + .is-style-eyebrow {
	margin-block-start: 0;
}

/* Our work: photo tiles with the job written on them. Desktop: one big
   tile and four small ones; tablet: two per row; phone: swipe sideways. */
.th-work-grid {
	display: grid;
	gap: 16px;
	grid-auto-rows: 250px;
	grid-template-columns: repeat(4, 1fr);
}
.th-work-tile {
	border-radius: 20px;
	margin: 0 !important;
	overflow: hidden;
	position: relative;
}
.th-work-tile:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.th-work-tile .th-work-photo,
.th-work-tile .th-work-photo img {
	display: block;
	height: 100%;
	margin: 0;
	width: 100%;
}
.th-work-tile .th-work-photo img {
	object-fit: cover;
	transition: transform 0.4s ease;
}
.th-work-tile:hover .th-work-photo img {
	transform: scale(1.04);
}
.th-work-caption {
	background: linear-gradient(to top, rgba(17, 18, 19, 0.82), rgba(17, 18, 19, 0));
	bottom: 0;
	left: 0;
	padding: 48px 18px 16px;
	position: absolute;
	right: 0;
}
.th-work-caption > * {
	margin: 0;
}
.th-work-caption > * + * {
	margin-block-start: 4px;
}
.th-work-service {
	color: var(--wp--preset--color--gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}
.th-work-title {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
}
.th-work-tile:first-child .th-work-title {
	font-size: clamp(20px, 2vw, 26px);
}
.th-work-title a {
	color: inherit;
	text-decoration: none;
}
/* The whole tile is the link. */
.th-work-title a::after {
	content: "";
	inset: 0;
	position: absolute;
}
.th-work-title a:focus-visible {
	outline: none;
}
.th-work-tile:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}
@media (max-width: 1023px) {
	.th-work-grid {
		grid-auto-rows: 240px;
		grid-template-columns: repeat(2, 1fr);
	}
	.th-work-tile:first-child {
		grid-row: span 1;
	}
}
@media (max-width: 599px) {
	.th-work-grid {
		display: flex;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 16px)) !important;
		overflow-x: auto;
		padding-inline: var(--wp--style--root--padding-left, 16px);
		scroll-padding-inline: var(--wp--style--root--padding-left, 16px);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.th-work-grid::-webkit-scrollbar {
		display: none;
	}
	.th-work-tile {
		aspect-ratio: 4 / 5;
		flex: 0 0 78%;
		scroll-snap-align: start;
	}
}

/* Four points under the photos */
.th-points {
	border-top: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(4, 1fr);
	padding-top: 32px;
}
.th-point {
	margin: 0 !important;
	padding-left: 36px;
	position: relative;
}
.th-point::before {
	background: var(--wp--preset--color--green-tint) url(../images/deco/check.svg) center / 18px no-repeat;
	border-radius: 46% 54% 42% 58% / 56% 44% 56% 44%;
	content: "";
	height: 26px;
	left: 0;
	position: absolute;
	top: -1px;
	width: 26px;
}
.th-point > * {
	margin: 0;
}
.th-point > * + * {
	margin-block-start: 6px;
}
@media (max-width: 1023px) {
	.th-points {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 599px) {
	.th-points {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Service page: big photo, then a row of more photos from the same kind of job */
.th-service-figure {
	border-radius: 24px;
	margin: 0;
	overflow: hidden;
}
.th-service-figure img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}
.th-service-more {
	display: grid;
	gap: 12px;
	margin-block-start: 12px !important;
}
.th-service-more figure {
	border-radius: 14px;
	margin: 0;
	overflow: hidden;
}
.th-service-more img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}
@media (max-width: 599px) {
	/* Four photos: two rows of two on a phone, so each one stays big enough to see. */
	.th-service-more--4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.th-work-tile .th-work-photo img {
		transition: none;
	}
}

/* TaskRabbit look (theme 0.16.0): TaskRabbit's green for buttons and links,
   dark green headings, and soft decoration (blobs, sparkles, a yellow swoosh,
   waves). Everything here is CSS on existing classes, so pages saved earlier
   pick it up, and screen readers skip it. The pictures in images/deco/ use the
   palette colours as plain values (make-deco.py in the brand folder). */

/* Big headings in dark green, as on TaskRabbit; headings on dark boxes keep their colour. */
:is(h1, h2).wp-block-heading:not(.has-text-color),
h1.wp-block-post-title:not(.has-text-color),
.th-service-title,
.th-page-title {
	color: var(--wp--preset--color--forest);
}
:is(.has-ink-background-color, .has-forest-background-color, .has-green-background-color) :is(h1, h2):not(.has-text-color) {
	color: inherit;
}

/* Dark boxes are dark green instead of black; the renovation card on the
   home page is soft violet (theme 0.18.1), with lighter text on it. */
.th-calc-band.has-ink-background-color {
	background-color: var(--wp--preset--color--forest) !important;
}
.th-lane.has-ink-background-color {
	background-color: var(--wp--preset--color--violet) !important;
}
.th-lane.has-ink-background-color .has-on-ink-color:not(.is-style-eyebrow) {
	color: #F1ECF8 !important;
}

/* Hero: blobs and sparkles on both sides of the headline, a swoosh under it. */
.th-hero {
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
	position: relative;
}
.th-hero::before,
.th-hero::after {
	background: center / contain no-repeat;
	content: "";
	height: 340px;
	pointer-events: none;
	position: absolute;
	width: 300px;
	z-index: -1;
}
.th-hero::before {
	background-image: url(../images/deco/hero-left.svg);
	left: max(-90px, calc(50% - 720px));
	top: 40px;
}
.th-hero::after {
	background-image: url(../images/deco/hero-right.svg);
	right: max(-90px, calc(50% - 720px));
	top: 120px;
}
.th-hero-head h1::after {
	background: var(--wp--preset--color--gold);
	content: "";
	display: block;
	height: 16px;
	margin: 12px auto 0;
	-webkit-mask: url(../images/deco/swoosh.svg) center / 100% 100% no-repeat;
	mask: url(../images/deco/swoosh.svg) center / 100% 100% no-repeat;
	width: min(280px, 60%);
}
@media (max-width: 1023px) {
	.th-hero::before,
	.th-hero::after {
		height: 220px;
		opacity: 0.8;
		width: 194px;
	}
	.th-hero::before {
		left: -110px;
		top: 10px;
	}
	.th-hero::after {
		right: -100px;
		top: 70px;
	}
}
/* Phones: only a corner of the left picture and a sparkle, so nothing sits behind the text. */
@media (max-width: 599px) {
	.th-hero::before {
		height: 150px;
		left: -96px;
		top: 18px;
		width: 132px;
	}
	.th-hero::after {
		background: var(--wp--preset--color--gold);
		height: 20px;
		-webkit-mask: url(../images/deco/sparkle.svg) center / contain no-repeat;
		mask: url(../images/deco/sparkle.svg) center / contain no-repeat;
		opacity: 1;
		right: 14px;
		top: 4px;
		width: 20px;
	}
	.th-hero-head h1::after {
		height: 12px;
		margin-top: 8px;
	}
	.th-calc-band::after {
		display: none;
	}
}

/* Section headings with a yellow swoosh underneath. */
.th-work h2.wp-block-heading::after,
.th-how h2.wp-block-heading::after {
	background: var(--wp--preset--color--gold);
	content: "";
	display: block;
	height: 14px;
	margin-top: 10px;
	-webkit-mask: url(../images/deco/swoosh.svg) center / 100% 100% no-repeat;
	mask: url(../images/deco/swoosh.svg) center / 100% 100% no-repeat;
	width: 150px;
}

/* Service lanes: a mint blob in the corner of the light card, a soft one and a sparkle on the dark card. */
.th-lane {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}
.th-lane::before,
.th-lane::after {
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: -1;
}
.th-lane::before {
	background: var(--wp--preset--color--mint);
	border-radius: 46% 54% 42% 58% / 56% 44% 56% 44%;
	bottom: -70px;
	height: 190px;
	opacity: 0.7;
	right: -60px;
	width: 210px;
}
.th-lane.has-ink-background-color::before {
	background: #fff;
	opacity: 0.07;
}
.th-lane.has-ink-background-color::after {
	background: var(--wp--preset--color--gold);
	bottom: 34px;
	height: 26px;
	-webkit-mask: url(../images/deco/sparkle.svg) center / contain no-repeat;
	mask: url(../images/deco/sparkle.svg) center / contain no-repeat;
	right: 34px;
	width: 26px;
}

/* How it works and the areas band: wavy top and bottom edges, a dotted line between the steps. */
.th-how,
.th-areas-band {
	position: relative;
}
.th-how::before,
.th-how::after,
.th-areas-band::before,
.th-areas-band::after {
	background: var(--wp--preset--color--green-soft);
	content: "";
	height: 40px;
	left: 0;
	-webkit-mask: url(../images/deco/wave.svg) center / 100% 100% no-repeat;
	mask: url(../images/deco/wave.svg) center / 100% 100% no-repeat;
	pointer-events: none;
	position: absolute;
	right: 0;
}
.th-how::before,
.th-areas-band::before {
	bottom: calc(100% - 1px);
}
.th-how::after,
.th-areas-band::after {
	top: calc(100% - 1px);
	transform: scale(-1, -1);
}
@media (min-width: 782px) {
	.th-how .wp-block-group.is-layout-grid {
		position: relative;
	}
	.th-how .wp-block-group.is-layout-grid::before {
		background: var(--wp--preset--color--green);
		content: "";
		height: 30px;
		left: 70px;
		-webkit-mask: url(../images/deco/dash.svg) center / 100% 100% no-repeat;
		mask: url(../images/deco/dash.svg) center / 100% 100% no-repeat;
		opacity: 0.55;
		pointer-events: none;
		position: absolute;
		right: calc(33.333% + 10px);
		top: 6px;
	}
}

/* Area chips get a map pin. */
.th-areas-band .is-style-chip .wp-block-button__link,
.th-area-chips .is-style-chip .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	gap: 6px;
}
.th-areas-band .is-style-chip .wp-block-button__link::before,
.th-area-chips .is-style-chip .wp-block-button__link::before {
	background: var(--wp--preset--color--green);
	content: "";
	flex: none;
	height: 16px;
	-webkit-mask: url(../images/deco/pin.svg) center / contain no-repeat;
	mask: url(../images/deco/pin.svg) center / contain no-repeat;
	width: 16px;
}

/* Dark quote band: soft light blob and a yellow sparkle. */
.th-calc-band {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}
.th-calc-band::before,
.th-calc-band::after {
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: -1;
}
.th-calc-band::before {
	background: #fff;
	border-radius: 46% 54% 42% 58% / 56% 44% 56% 44%;
	height: 260px;
	opacity: 0.07;
	right: -60px;
	top: -90px;
	width: 300px;
}
.th-calc-band::after {
	background: var(--wp--preset--color--gold);
	height: 34px;
	-webkit-mask: url(../images/deco/sparkle.svg) center / contain no-repeat;
	mask: url(../images/deco/sparkle.svg) center / contain no-repeat;
	right: clamp(28px, 5vw, 72px);
	top: clamp(26px, 4vw, 48px);
	width: 34px;
}

/* Closing call to action: a picture on the right on wide screens. */
@media (min-width: 1024px) {
	.th-cta {
		background: url(../images/deco/cta-art.svg) right max(0px, calc(50% - 640px)) center / auto 78% no-repeat;
	}
}

/* Service and overview pages: a short swoosh under the page title. */
.th-service-title::after,
.th-page-title::after {
	background: var(--wp--preset--color--gold);
	content: "";
	display: block;
	height: 12px;
	margin-top: 10px;
	-webkit-mask: url(../images/deco/swoosh.svg) center / 100% 100% no-repeat;
	mask: url(../images/deco/swoosh.svg) center / 100% 100% no-repeat;
	width: 130px;
}
.has-text-align-center.th-page-title::after {
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
	.th-service-card .th-icon {
		transition: none;
	}
}