/*
Theme Name: TipTop Dwelling
Theme URI: https://tiptopdwelling.com/
Author: Story Cartel
Author URI: https://storycartel.com/websites/
Description: TipTop Dwelling's theme (Trevor Perla, cleaning and junk removal in Harrisburg, PA). From the starter theme, direction A "Teal" (clients/tiptopdwelling/design.md): the logo's teal, cream and gold, Inter everywhere, one color scheme.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tiptopdwelling
*/

/* ==========================================================================
   1. Tokens (clients/tiptopdwelling/design.md). One color scheme, no dark mode.
   ========================================================================== */

:root {
	/* The logo's colors, sampled from his PNG. */
	--logo-teal: #18333c;
	--logo-cream: #fae6a3;
	--logo-gold: #f0c260;

	--ground: #fbf7ee;
	--surface: #ffffff;
	--surface-sunk: #f3ecdc;

	--ink: #142a31;
	--ink-soft: #3d5158;
	--ink-faint: #56676c;
	--ink-invert: #fbf7ee;

	--accent: #18333c;
	--accent-hover: #0f242b;
	--accent-quiet: #e4ecec;
	--on-accent: #ffffff;
	--signup-band: #fdf6dc;

	/* Book: gold, the one color you press. */
	--book-bg: #f0c260;
	--book-bg-hover: #e6b240;
	--book-ink: #18333c;
	--kicker: #83601a;

	--rule: #e6dcc6;
	--focus: #18333c;

	/* Type: Inter for everything (his survey answer). */
	--serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--step--1: clamp(0.83rem, 0.81rem + 0.11vw, 0.89rem);
	--step-0: clamp(1.05rem, 1.01rem + 0.2vw, 1.19rem);
	--step-1: clamp(1.27rem, 1.19rem + 0.38vw, 1.5rem);
	--step-2: clamp(1.52rem, 1.38rem + 0.68vw, 2rem);
	--step-3: clamp(1.8rem, 1.3rem + 2vw, 2.75rem);
	--step-4: clamp(2.4rem, 1.5rem + 4vw, 4.25rem);

	--gap: 1.25rem;
	--band: clamp(3rem, 2rem + 5vw, 5.5rem);
	--measure: 36rem;
	--wide: 72rem;
	--radius: 8px;
}


/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--serif);
	font-size: var(--step-0);
	line-height: 1.6;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.012em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 {
	font-size: var(--step-4);
}

h2 {
	font-size: var(--step-3);
}

h3 {
	font-size: var(--step-1);
}

p {
	margin: 0 0 1.1em;
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--accent);
}

a:hover {
	color: var(--accent);
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin: 0;
}

blockquote {
	margin: 0;
}

ul,
ol {
	padding-left: 1.1em;
}

li {
	margin-bottom: 0.4em;
}

hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: var(--band) 0;
}

::selection {
	background: var(--accent-quiet);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--surface);
	color: var(--ink);
	padding: 0.75rem 1rem;
	z-index: 100;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.wrap {
	width: min(100% - 2rem, var(--wide));
	margin-inline: auto;
}

.wrap--narrow {
	width: min(100% - 2rem, 46rem);
	margin-inline: auto;
}

.band {
	padding-block: var(--band);
}

.band--sunk {
	background: var(--surface-sunk);
}

.band--surface {
	background: var(--surface);
}

.measure {
	max-width: var(--measure);
}

.lede {
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--ink-soft);
}

.eyebrow {
	font-family: var(--sans);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 0.9rem;
}

.section-title {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.section-title h2 {
	margin: 0;
}

.section-title--spaced {
	margin-top: 3rem;
}

.section-title::after {
	content: "";
	width: 2.5rem;
	height: 2px;
	background: var(--accent);
}

/* ==========================================================================
   4. Header & navigation
   ========================================================================== */

.site-header {
	border-bottom: 1px solid var(--rule);
	background: var(--ground);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-block: 1.1rem;
}

.site-title {
	font-family: var(--serif);
	font-size: var(--step-1);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
}

.site-title a {
	text-decoration: none;
}

.site-title__role {
	display: block;
	font-family: var(--sans);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ink-faint);
}

.nav {
	font-family: var(--sans);
	font-size: var(--step--1);
	letter-spacing: 0.02em;
}

.nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav a {
	text-decoration: none;
	color: var(--ink-soft);
	padding-block: 0.3rem;
	border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav .current-menu-item > a {
	color: var(--ink);
	border-bottom-color: var(--accent);
}

.nav .nav-cta > a {
	background: var(--accent);
	color: var(--on-accent);
	border: 0;
	border-radius: var(--radius);
	padding: 0.5rem 0.9rem;
	font-weight: 600;
}

.nav .nav-cta > a:hover {
	background: var(--accent-hover);
	color: var(--on-accent);
}

/* Mobile menu. assets/js/nav.js adds .has-menu-toggle and reveals the button;
   without it the links above simply wrap. Wide screens never show the
   button. */
.menu-toggle {
	display: none;
}

@media (max-width: 44em) {
	.has-menu-toggle .site-header__inner {
		align-items: center;
	}

	.has-menu-toggle .menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		min-height: 2.75rem;
		padding: 0 0.6rem;
		margin-right: -0.6rem;
		border: 0;
		background: none;
		font-family: var(--sans);
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: 0.02em;
		color: var(--ink);
		cursor: pointer;
	}

	/* Three bars that turn into an X while the menu is open. */
	.menu-toggle__icon,
	.menu-toggle__icon::before,
	.menu-toggle__icon::after {
		display: block;
		width: 1.125rem;
		height: 2px;
		border-radius: 1px;
		background: currentColor;
		transition: transform 0.2s ease, background-color 0.2s ease;
	}

	.menu-toggle__icon {
		position: relative;
	}

	.menu-toggle__icon::before,
	.menu-toggle__icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.menu-toggle__icon::before { top: -6px; }
	.menu-toggle__icon::after { top: 6px; }

	.is-menu-open .menu-toggle__icon { background-color: transparent; }
	.is-menu-open .menu-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
	.is-menu-open .menu-toggle__icon::after { transform: translateY(-6px) rotate(-45deg); }

	.has-menu-toggle .nav {
		display: none;
		flex-basis: 100%;
		font-size: var(--step-0);
	}

	.has-menu-toggle.is-menu-open .nav {
		display: block;
	}

	.has-menu-toggle .nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Set like a short table of contents: the display serif, space between
	   the links and no rules. */
	.has-menu-toggle .nav ul {
		padding-block: 0.5rem 1.25rem;
	}

	.has-menu-toggle .nav a {
		display: block;
		padding-block: 0.4rem;
		border-bottom: 0;
		font-family: var(--serif);
		font-size: var(--step-2);
		font-weight: 500;
		letter-spacing: -0.01em;
		color: var(--ink);
	}

	/* The menu's call to action stays a button, set apart below the links. */
	.has-menu-toggle .nav .nav-cta > a {
		margin-top: 1rem;
		padding: 0.75rem 1rem;
		font-family: var(--sans);
		font-size: var(--step-0);
		letter-spacing: 0;
		color: var(--on-accent);
		text-align: center;
	}
}

/* ==========================================================================
   5. Buttons
   The editor's Button block gets the same look: the default style is the
   solid button, the Outline style is the quiet one.
   ========================================================================== */

.button,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--sans);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding: 0.8rem 1.3rem;
	border-radius: var(--radius);
	border: 1px solid var(--accent);
	background: var(--accent);
	color: var(--on-accent);
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.button:hover,
.wp-block-button .wp-block-button__link:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--on-accent);
}

.button--quiet,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--ink);
	border-color: var(--rule);
}

.button--quiet:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
}

.actions,
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
	padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) var(--band);
}

.hero__inner {
	display: grid;
	gap: clamp(1.75rem, 1rem + 4vw, 3.5rem);
}

@media (min-width: 52em) {
	.hero__inner {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: center;
	}
}

.hero h1 {
	margin-bottom: 0.35em;
}

.hero__line {
	font-size: var(--step-1);
	line-height: 1.45;
	color: var(--ink-soft);
	max-width: 30ch;
}

.hero__portrait {
	position: relative;
}

.hero__portrait .wp-block-image {
	margin: 0;
}

.hero__portrait img {
	width: 100%;
	border-radius: var(--radius);
	background: var(--surface-sunk);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.portrait-placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	border: 1px dashed var(--rule);
	border-radius: var(--radius);
	background: var(--surface-sunk);
	color: var(--ink-faint);
	font-family: var(--sans);
	font-size: var(--step--1);
	text-align: center;
	padding: 1.5rem;
}

/* Where I've spoken: names set in type, one quiet row under the hero. */
.spoken {
	border-top: 1px solid var(--rule);
	padding-block: 1.75rem 2.25rem;
}

.spoken .eyebrow {
	margin-bottom: 0.75rem;
}

.spoken__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2.25rem;
	font-family: var(--serif);
	font-size: var(--step-1);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink-soft);
}

.spoken__list li {
	margin: 0;
}

/* ==========================================================================
   7. Figures (the proof strip)
   ========================================================================== */

.figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1rem;
	border-top: 1px solid var(--rule);
	padding-top: 1.75rem;
	margin-top: 2.25rem;
}

@media (min-width: 46em) {
	.figures {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.figure__value {
	display: block;
	margin: 0;
	font-family: var(--serif);
	font-size: var(--step-2);
	font-weight: 600;
	line-height: 1.1;
	color: var(--accent);
}

.figure__label {
	display: block;
	margin-bottom: 0;
	font-family: var(--sans);
	font-size: var(--step--1);
	line-height: 1.4;
	color: var(--ink-faint);
	margin-top: 0.35rem;
}

/* ==========================================================================
   8. Cards & grids
   ========================================================================== */

.grid {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 42em) {
	.grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

.card {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.card h3 {
	margin-bottom: 0.5rem;
}

.card p:last-child {
	margin-bottom: 0;
}

.card__meta {
	font-family: var(--sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
}

/* Topics get a number, which is the only ornament in the theme. */
.topic {
	counter-increment: topic;
	position: relative;
	padding-top: 2.25rem;
}

.topic::before {
	content: counter(topic, decimal-leading-zero);
	position: absolute;
	top: 1.25rem;
	font-family: var(--sans);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--accent);
}

.topics {
	counter-reset: topic;
	margin-top: 2.5rem;
}

/* ==========================================================================
   9. Quotes
   ========================================================================== */

.quote {
	border-left: 2px solid var(--accent);
	padding-left: 1.25rem;
	font-size: var(--step-1);
	line-height: 1.45;
}

.quote p {
	margin-bottom: 0.6em;
}

.quote cite {
	display: block;
	font-family: var(--sans);
	font-size: var(--step--1);
	font-style: normal;
	color: var(--ink-faint);
}

.pull {
	font-size: var(--step-2);
	line-height: 1.25;
	max-width: 22ch;
	margin: 0;
}

/* ==========================================================================
   10. Lists: events, press, endorsements
   ========================================================================== */

.entries {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.entries > li {
	margin: 0;
	font-family: var(--sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
}

/* The bold part of a list item is its title; the rest is the meta line. */
.entries strong {
	display: block;
	font-family: var(--serif);
	font-size: var(--step-1);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
	margin: 0 0 0.25rem;
}

.entries strong a {
	color: var(--ink);
	text-decoration: none;
}

.entries strong a:hover {
	color: var(--accent);
	text-decoration: underline;
}

/* Press photographs: image, then a title and download links beneath it. */
.photos {
	margin-block: 1.75rem 2.25rem;
}

.photos .wp-block-image {
	margin: 0;
}

/* One ratio across the row so the captions share a baseline. The download
   links always point at the uncropped file. */
.photos .wp-block-image img {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	display: block;
}

.photo__meta {
	font-family: var(--sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
	margin: 0.6rem 0 0;
}

.photo__meta strong {
	display: block;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 0.15rem;
}

.meta {
	font-family: var(--sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
	margin: 0;
}

.names {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 42em) {
	.names {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.names--stack {
	grid-template-columns: minmax(0, 1fr);
}

.names li {
	margin: 0;
	font-family: var(--sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
}

.names strong {
	display: block;
	font-family: var(--serif);
	font-size: var(--step-0);
	font-weight: 600;
	color: var(--ink);
}

/* ==========================================================================
   11. Forms
   ========================================================================== */

.form {
	display: grid;
	gap: 1rem;
	max-width: 36rem;
}

.form label {
	display: block;
	font-family: var(--sans);
	font-size: var(--step--1);
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea,
.form select {
	width: 100%;
	font-family: var(--sans);
	font-size: var(--step-0);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: 0.7rem 0.8rem;
}

.form textarea {
	min-height: 9rem;
	resize: vertical;
}

.form__row {
	display: grid;
	gap: 1rem;
}

@media (min-width: 36em) {
	.form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.form__optional {
	font-weight: 400;
	color: var(--ink-faint);
}

.form select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 50%, calc(100% - 0.75rem) 50%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
	padding-right: 2rem;
}

.form__hp {
	position: absolute;
	left: -9999px;
}

.form__note {
	font-family: var(--sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
}

.notice {
	border-left: 2px solid var(--accent);
	background: var(--accent-quiet);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-family: var(--sans);
	font-size: var(--step--1);
}

/* ==========================================================================
   12. Entry content (pages and posts from the editor)
   ========================================================================== */

.entry {
	max-width: 40rem;
}

.entry h2 {
	font-size: var(--step-2);
	margin-top: 1.8em;
}

.entry h3 {
	margin-top: 1.6em;
}

.entry img {
	border-radius: var(--radius);
	margin-block: 1.5rem;
}

.entry .wp-block-quote {
	border-left: 2px solid var(--accent);
	padding-left: 1.25rem;
	font-size: var(--step-1);
}

.entry-meta {
	font-family: var(--sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
	margin-bottom: 1.5rem;
}

.page-header {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem) 0;
}

.page-header h1 {
	margin-bottom: 0.3em;
}

/* ==========================================================================
   13. Call to action band
   ========================================================================== */

.cta {
	background: var(--surface-sunk);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.cta__inner {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

@media (min-width: 46em) {
	.cta__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.cta h2 {
	margin: 0;
	font-size: var(--step-2);
}

.cta p {
	margin: 0.5rem 0 0;
	color: var(--ink-soft);
}

.cta .actions,
.cta .wp-block-buttons {
	margin-top: 0;
}

/* ==========================================================================
   14. Footer
   ========================================================================== */

.site-footer {
	padding-block: var(--band) 2.5rem;
	font-family: var(--sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
}

.site-footer__inner {
	display: grid;
	gap: 2rem;
}

@media (min-width: 46em) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	}
}

.site-footer h2 {
	font-family: var(--sans);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 0.9rem;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.site-footer a {
	text-decoration: none;
	color: var(--ink-soft);
}

.site-footer a:hover {
	color: var(--accent);
}

.site-footer__legal {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
}

/* The Story Cartel credit sits on the right, beside the theme switch (stacked on phones). */
@media (min-width: 46em) {
	.site-footer .site-footer__credit {
		margin-left: auto;
	}
}

.site-footer p {
	margin: 0 0 0.6em;
}

/* ==========================================================================
   16. Print. The press kit is meant to survive a printer.
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.cta,
	.actions,
	.wp-block-buttons {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.band {
		padding-block: 1rem;
		break-inside: avoid;
	}
}

/* ==========================================================================
   Email signup (Joe's Popups templates in popups/, tiptopdwelling_signup_form())
   ========================================================================== */

.signup__title {
	font-size: var(--step-2);
	line-height: 1.15;
	margin: 0 0 0.6rem;
}

.signup__why {
	margin: 0 0 1.1rem;
}

.signup__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.signup__form input {
	flex: 1 1 12rem;
	min-width: 0;
	font-family: var(--sans);
	font-size: var(--step-0);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: 0.7rem 0.8rem;
}

.signup__form .button {
	flex: 1 1 100%;
	justify-content: center;
}

.signup__error {
	flex-basis: 100%;
	margin: 0;
	color: var(--accent);
	font-size: var(--step--1);
}

.signup__done {
	margin: 0;
}

/* On the home page the signup is a full-width band after the section named in TIPTOPDWELLING_SIGNUP_AFTER
   (moved there by tiptopdwelling_signup_move()): words left, form right. */
.jp.jp--inline {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	max-height: none;
	overflow: visible;
	background: var(--signup-band);
	color: var(--ink);
}

.jp--inline .jp__body {
	width: min(100% - 2rem, var(--wide));
	margin-inline: auto;
	padding: 2.6rem 0;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	column-gap: 2.5rem;
	align-items: center;
}

.jp--inline .signup__title,
.jp--inline .signup__why {
	grid-column: 1;
}

.jp--inline .signup__why {
	margin: 0;
}

.jp--inline .signup__form,
.jp--inline .signup__done {
	grid-column: 2;
	grid-row: 1 / span 2;
}

@media (max-width: 800px) {
	.jp--inline .jp__body {
		grid-template-columns: 1fr;
		row-gap: 1rem;
	}
	.jp--inline .signup__form,
	.jp--inline .signup__done {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ==========================================================================
   The blog (home.php, archive.php, single.php, comments.php)
   Optional per site; the templates ship either way. Posts are spaced apart,
   never divided by rules.
   ========================================================================== */

/* On a post, its blog's menu item is the current one. */
.nav .current_page_parent > a {
	color: var(--accent);
}

.post-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	max-width: 52rem;
}

.post-card {
	margin: 0;
	display: grid;
	gap: 1rem;
}

@media (min-width: 46em) {
	.post-card--image {
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
		gap: 2rem;
		align-items: start;
	}
}

.post-card__image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius);
}

.post-card__date {
	font-family: var(--sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
	margin: 0 0 0.4rem;
}

.post-card__title {
	font-size: var(--step-2);
	margin: 0 0 0.5rem;
}

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

.post-card__title a:hover {
	color: var(--accent);
	text-decoration: underline;
}

.post-card__excerpt {
	color: var(--ink-soft);
	margin: 0;
}

/* Page numbers under a list of posts. */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 3rem;
	font-family: var(--sans);
	font-size: var(--step--1);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.8rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	color: var(--ink-soft);
	text-decoration: none;
}

.pagination a.page-numbers:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* A post: one centered column, the photo a little wider. */
.post-header,
.post-body,
.post-after {
	width: min(100% - 2rem, 40rem);
	margin-inline: auto;
}

.post-header {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem) 0;
}

.post-header .eyebrow a {
	color: inherit;
	text-decoration: none;
}

.post-header .eyebrow a:hover {
	color: var(--accent);
}

.post-header h1 {
	font-size: var(--step-4);
	margin-bottom: 0.4em;
}

.post-header .entry-meta {
	margin: 0;
}

.post-photo {
	width: min(100% - 2rem, 52rem);
	margin: 2rem auto 0;
}

.post-photo img {
	width: 100%;
	border-radius: var(--radius);
}

.post-photo figcaption,
.entry figcaption {
	font-family: var(--sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
	margin-top: 0.6rem;
}

.post-body {
	max-width: none;
	padding-block: 2.5rem var(--band);
}

.entry ul,
.entry ol {
	margin: 0 0 1.1em;
}

.entry figure {
	margin-block: 2rem;
}

.entry figure img {
	margin-block: 0;
}

.entry .wp-block-pullquote {
	margin-block: 2.5rem;
	padding: 0;
	font-size: var(--step-2);
	line-height: 1.3;
	text-align: left;
}

.entry .wp-block-quote cite,
.entry .wp-block-pullquote cite {
	display: block;
	font-family: var(--sans);
	font-size: var(--step--1);
	font-style: normal;
	color: var(--ink-faint);
	margin-top: 0.5rem;
}

.entry code {
	font-size: 0.9em;
	background: var(--surface-sunk);
	padding: 0.1em 0.3em;
	border-radius: var(--radius);
}

.post-after {
	padding-block: var(--band);
}

/* Previous and next post. */
.post-nav .nav-links {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 40em) {
	.post-nav .nav-links {
		grid-template-columns: 1fr 1fr;
	}
	.post-nav .nav-next {
		grid-column: 2;
		text-align: right;
	}
}

.post-nav a {
	display: block;
	text-decoration: none;
	color: var(--ink);
}

.post-nav__label {
	display: block;
	font-family: var(--sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
	margin-bottom: 0.25rem;
}

.post-nav__title {
	font-weight: 600;
	line-height: 1.3;
}

.post-nav a:hover .post-nav__title {
	color: var(--accent);
	text-decoration: underline;
}

/* Comments, when a site has them on. */
.comments {
	margin-top: var(--band);
}

.comments__title {
	font-size: var(--step-2);
}

.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	display: grid;
	gap: 2rem;
}

.comment-list .children {
	margin: 1.5rem 0 0 1.25rem;
}

.comment-meta {
	font-family: var(--sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
	margin-bottom: 0.5rem;
}

.comment-meta .fn {
	font-style: normal;
	font-weight: 600;
	color: var(--ink);
}

.comment-meta a {
	color: inherit;
	text-decoration: none;
}

.comment-meta .says {
	display: none;
}

.comment-metadata {
	margin-top: 0.15rem;
}

.comment .reply a {
	font-family: var(--sans);
	font-size: var(--step--1);
	display: inline-block;
	padding-block: 0.35rem;
}

.comment-form input[type="url"] {
	width: 100%;
	font-family: var(--sans);
	font-size: var(--step-0);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: 0.7rem 0.8rem;
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	gap: 0.5rem;
	align-items: start;
	font-family: var(--sans);
	font-size: var(--step--1);
}

.comment-form .comment-form-cookies-consent input {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--accent);
}

/* ==========================================================================
   TipTop: direction A, Teal (clients/tiptopdwelling/design.md)
   ========================================================================== */

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.025em; }
h1 { line-height: 1.02; }
h2 { line-height: 1.08; }
body { line-height: 1.6; }

/* ---- Header: the logo's teal, so the logo sits in it with no box ---------- */

.site-header { background: var(--logo-teal); color: var(--ink-invert); border-bottom: 0; position: sticky; top: 0; z-index: 40; }
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.site-header__inner { align-items: center; gap: 0.75rem 1.5rem; padding-block: 0.85rem; flex-wrap: nowrap; }
.site-title { line-height: 0; }
.site-logo { height: 2.6rem; width: auto; }
.nav { margin-left: auto; font-size: 0.95rem; font-weight: 600; letter-spacing: 0; }
.nav a { color: var(--ink-invert); opacity: 0.85; }
.nav a:hover, .nav .current-menu-item > a { color: var(--ink-invert); opacity: 1; border-bottom-color: var(--logo-gold); }
.header-actions { display: flex; align-items: center; gap: 1rem; flex: none; }
.header-phone { font: 700 0.95rem/1 var(--sans); color: var(--ink-invert); text-decoration: none; white-space: nowrap; }
.header-phone:hover { color: var(--logo-gold); }
.menu-toggle { color: var(--ink-invert); }
@media (max-width: 60em) { .header-phone { display: none; } }

/* ---- Buttons: pills; gold for Book --------------------------------------- */

.button, .wp-block-button .wp-block-button__link { border-radius: 999px; font-size: 1rem; padding: 0.9rem 1.5rem; letter-spacing: 0; }
.button--book, .wp-block-button.is-book .wp-block-button__link { background: var(--book-bg); border-color: var(--book-bg); color: var(--book-ink); }
.button--book:hover, .wp-block-button.is-book .wp-block-button__link:hover { background: var(--book-bg-hover); border-color: var(--book-bg-hover); color: var(--book-ink); }
.header-book { padding: 0.75rem 1.4rem; font-size: 0.95rem; }
.wp-block-button.is-style-outline > .wp-block-button__link { color: var(--ink); border: 2px solid currentColor; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { color: var(--accent); border-color: var(--accent); }
.on-teal .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--ink-invert); }
.on-teal .wp-block-button.is-style-outline > .wp-block-button__link:hover { color: var(--logo-gold); border-color: var(--logo-gold); }

/* ---- Section labels and heads ------------------------------------------- */

.kicker { font: 700 0.8rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--kicker); margin: 0 0 1rem; }
.head { max-width: 42rem; margin-bottom: 2.5rem; }
.head h2 { margin-bottom: 0.75rem; }
.head p { color: var(--ink-soft); }
.on-teal { background: var(--logo-teal); color: var(--ink-invert); }
.on-teal h1, .on-teal h2 { color: var(--logo-cream); }
.on-teal .kicker { color: var(--logo-gold); }
.on-teal p { color: #d5e0e2; }
.on-teal a:not(.wp-block-button__link) { color: var(--ink-invert); text-decoration-color: var(--logo-gold); }

/* ---- Home hero ---------------------------------------------------------- */

.hero.on-teal { padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem); }
.hero__inner { align-items: center; gap: 2.5rem 4rem; }
@media (min-width: 52em) { .hero__inner { grid-template-columns: 1.05fr 1fr; } }
.hero h1 { margin-bottom: 1.25rem; }
.hero__line { color: #d5e0e2; max-width: 34rem; font-size: var(--step-1); }
.hero__photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; margin: 1.75rem 0 0; font: 500 0.95rem/1.4 var(--sans); }
.rating strong { font-weight: 700; }
.stars { color: var(--logo-gold); letter-spacing: 0.1em; font-size: 1.1rem; }

/* ---- Page heads (every page but home) ----------------------------------- */

.page-head { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.page-head h1 { margin-bottom: 1rem; }
.page-head p { max-width: 40rem; font-size: var(--step-1); line-height: 1.5; }

/* ---- Service cards ------------------------------------------------------ */

.services { display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .services { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.service { background: var(--surface); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -12px rgb(0 0 0 / 0.18); }
.service figure, .service .wp-block-image { margin: 0; }
.service img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.service__body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.service h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.service { position: relative; }
/* The whole card is the link (the title's ::after covers it), and the title itself is a 2rem tap target. */
.service h3 a { display: block; min-height: 2rem; text-decoration: none; }
.service h3 a::after { content: ""; position: absolute; inset: 0; }
.service:hover h3 a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--logo-gold); }
.service p { font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); margin-bottom: 1rem; }
.service p.price { margin: auto 0 0; font-weight: 700; color: var(--accent); }
.also { margin-top: 1.75rem; color: var(--ink-soft); }

/* ---- Before and after --------------------------------------------------- */

.pairs { display: grid; gap: 2.5rem 2rem; }
@media (min-width: 52em) { .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pair__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pair__photos figure { position: relative; margin: 0; }
.pair__photos img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-radius: var(--radius); }
.pair__photos figcaption { position: absolute; left: 0.75rem; top: 0.75rem; margin: 0; background: rgb(0 0 0 / 0.72); color: #fff; font: 700 0.75rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.45rem 0.65rem; border-radius: 999px; }
.pair__photos figure + figure figcaption { background: var(--logo-gold); color: var(--logo-teal); }
.pair h3 { font-size: 1.15rem; margin: 1rem 0 0.35rem; }
.pair p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.pair .wp-block-buttons { margin-top: 1rem; }
.gallery { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }

/* ---- Reasons ------------------------------------------------------------ */

.reasons { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 44em) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.reason h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.reason p { color: var(--ink-soft); margin: 0; }
.reason p.reason__mark { color: var(--logo-gold); margin-bottom: 1rem; }
.reason__mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--logo-teal); color: var(--logo-gold); font: 700 1.1rem/1 var(--sans); margin: 0 0 1rem; }

/* ---- Reviews ------------------------------------------------------------ */

.reviews { display: grid; gap: 1.25rem; }
@media (min-width: 52em) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; margin: 0; border: 0; }
.review p { margin: 0 0 1rem; }
.review cite, .review .wp-block-quote__citation { font-size: 0.9rem; font-weight: 600; font-style: normal; color: var(--ink-faint); }
.review::before { content: "★★★★★"; display: block; color: var(--logo-gold); letter-spacing: 0.1em; margin-bottom: 0.75rem; }

/* ---- Trevor ------------------------------------------------------------- */

.owner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52em) { .owner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 4rem; } }
.owner figure { margin: 0; }
.owner img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 30%; width: 100%; max-width: 26rem; }
.owner blockquote { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem); line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 1.5rem; padding: 0; border: 0; }
.owner .sig { font-weight: 700; margin: 0; }
.owner .sig span { display: block; font-weight: 500; color: var(--ink-faint); }
.note { max-width: 40rem; }
.note p { font-size: var(--step-1); line-height: 1.55; }
.note p.kicker { font-size: 0.8rem; line-height: 1; }
.note p.sig { font-size: 1rem; }

/* ---- Areas -------------------------------------------------------------- */

.areas { display: grid; gap: 2rem; }
@media (min-width: 52em) { .areas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4rem; align-items: start; } }
.towns { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.towns li { margin: 0; font: 600 0.95rem/1 var(--sans); padding: 0.7rem 1rem; border-radius: 999px; background: var(--surface); }
.counties { margin-top: 1.25rem; color: var(--ink-soft); }

/* ---- Closing band ------------------------------------------------------- */

.closing { text-align: center; }
.closing .wrap { max-width: 44rem; }
.closing .wp-block-buttons { justify-content: center; }

/* ---- Services page sections, pricing tables, FAQ ------------------------ */

.service-row { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 52em) { .service-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4rem; } }
.service-row figure { margin: 0; }
.service-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.service-row ul { padding-left: 1.2em; }
.price-line { font-weight: 700; color: var(--accent); }
.prices table, .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.wp-block-table { margin: 0 0 2.5rem; overflow-x: auto; }
.wp-block-table th, .wp-block-table td { text-align: left; padding: 0.7rem 0.9rem; border: 0; }
.wp-block-table thead th { font-size: 0.85rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.wp-block-table tbody tr:nth-child(odd) { background: var(--surface); }
.wp-block-table td:first-child { font-weight: 500; }
.wp-block-table table.has-fixed-layout { table-layout: auto; }
@media (min-width: 44em) { .wp-block-table td + td { white-space: nowrap; } .wp-block-table.is-wide td + td { white-space: normal; } }
.wp-block-table thead th { letter-spacing: 0.02em; }
.checklist { display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 44em) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checklist h3 { font-size: 1.1rem; }
.checklist ul { padding-left: 1.2em; margin: 0; }
.faq h3 { font-size: 1.15rem; margin: 2rem 0 0.5rem; }
.faq h3:first-of-type { margin-top: 0; }
.faq p { color: var(--ink-soft); }
.wp-block-details { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 0.75rem; }
.wp-block-details summary { font-weight: 700; cursor: pointer; }
.wp-block-details p { margin: 0.75rem 0 0; color: var(--ink-soft); }

/* ---- Book page ---------------------------------------------------------- */

.book-paths { display: grid; gap: 2rem; }
@media (min-width: 60em) { .book-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.book-path { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; }
.book-path iframe { width: 100%; min-height: 44rem; border: 0; }
.contact-lines p { margin-bottom: 0.5rem; }

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

.site-footer { background: var(--logo-teal); color: #e9eef0; border-top: 0; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--logo-gold); }
.site-footer h2 { font: 700 0.8rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--logo-gold); margin-bottom: 1rem; }
.site-footer .site-logo { margin-bottom: 1rem; }
.site-footer__inner { gap: 2rem; }
@media (min-width: 52em) { .site-footer__inner { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.site-footer__legal { color: #b8c6c9; }

/* ---- Phone: the action bar is the call to action ------------------------- */

.actionbar { display: none; }
@media (max-width: 44em) {
	.header-actions { display: none; }
	.site-header__inner { flex-wrap: wrap; padding-block: 0.6rem; }
	.site-logo { height: 2.2rem; }
	.has-menu-toggle .nav a { color: var(--ink-invert); }
	.has-menu-toggle .menu-toggle { color: var(--ink-invert); }
	.owner img { aspect-ratio: 1 / 1; max-width: 20rem; object-position: 60% 25%; }
	.actionbar { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0.5rem; position: fixed; inset: auto 0 0 0; z-index: 50; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--logo-teal); box-shadow: 0 -6px 20px rgb(0 0 0 / 0.15); }
	.actionbar a { display: grid; place-items: center; min-height: 3rem; border-radius: 999px; font: 700 0.95rem/1 var(--sans); text-decoration: none; color: #fff; border: 2px solid rgb(255 255 255 / 0.35); }
	.actionbar a.is-book { background: var(--book-bg); color: var(--book-ink); border-color: transparent; }
	body { padding-bottom: 5rem; }
	h1 { font-size: 2.15rem; line-height: 1.05; }
	h2 { font-size: 1.75rem; }
	.band { padding-block: 3rem; }
	.hero.on-teal { padding-block: 1rem 2.5rem; }
	.hero__inner { gap: 1.5rem; }
	.hero__photo { order: -1; }
	.hero__photo img { aspect-ratio: 3 / 2; object-position: 50% 22%; }
	.hero .wp-block-buttons { display: none; }
	.hero__line { font-size: 1.08rem; }
	.rating { gap: 0.4rem 1rem; margin-top: 1.25rem; font-size: 0.9rem; }
	.service img { aspect-ratio: 16 / 9; }
	.closing .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.closing .wp-block-button__link { width: 100%; justify-content: center; }
	.page-head p { font-size: 1.08rem; }
	.wp-block-table th, .wp-block-table td { padding: 0.6rem 0.5rem; }
}

/* ---- Prices: a price list, not a spreadsheet (Joe, 2026-10-12) ------------- */

.price-lead { display: grid; gap: 2rem 3rem; align-items: center; }
@media (min-width: 60em) { .price-lead { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); } }
.price-lead__price { font: 700 clamp(3.5rem, 2rem + 6vw, 6rem)/0.95 var(--sans); letter-spacing: -0.04em; color: var(--accent); margin: 0 0 1rem; }
.price-lead__price span, .price-card__price span { display: block; font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); margin-top: 0.4rem; }
.price-lead__note { color: var(--ink-soft); max-width: 30rem; margin: 0; }
.price-cards { display: grid; gap: 1.25rem; }
@media (min-width: 44em) { .price-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52em) { .price-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price-card { background: var(--surface); border-radius: 14px; padding: 1.5rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 10px 30px -18px rgb(0 0 0 / 0.25); }
.price-card__label { font-weight: 700; margin: 0 0 0.75rem; }
.price-card__price { font: 700 2.6rem/1 var(--sans); letter-spacing: -0.03em; color: var(--accent); margin: 0 0 0.75rem; }
.price-card__note { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.price-card--list h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.price-card.is-popular { background: var(--logo-teal); color: var(--ink-invert); }
.price-card.is-popular h3 { color: var(--logo-cream); }
.price-card.is-popular .menu__name { color: #d5e0e2; }
.price-card.is-popular .menu__price { color: var(--logo-gold); }
.price-card__flag { display: inline-block; font: 700 0.75rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; background: var(--logo-gold); color: var(--logo-teal); padding: 0.45rem 0.7rem; border-radius: 999px; margin: 0 0 0.9rem; }
.menu__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.45rem; }
.menu__row p { margin: 0; }
.menu__name { color: var(--ink-soft); }
.menu__price { font-weight: 700; color: var(--accent); text-align: right; white-space: nowrap; }
.menu--cols { column-gap: 3.5rem; }
@media (min-width: 52em) { .menu--cols { columns: 2; } .menu--cols .menu__row { break-inside: avoid; } }

/* ---- What every clean includes: a card per room, with an icon (Joe, 2026-10-12) ---- */

.checklist__lead { max-width: 44rem; font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); margin-bottom: 2rem; }
.rooms { display: grid; gap: 1.25rem; }
@media (min-width: 44em) { .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } .room--deep { grid-column: span 2; } }
.room { background: var(--surface); border-radius: 14px; padding: 1.5rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 10px 30px -18px rgb(0 0 0 / 0.25); }
.room h3 { display: flex; align-items: center; gap: 0.85rem; font-size: 1.3rem; margin: 0 0 1rem; }
.room h3::before { content: ""; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--logo-teal) var(--icon) center / 1.45rem no-repeat; }
.room--kitchen { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c260' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h16v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M9 6.5c0-1 1-1.2 1-2.5M14 6.5c0-1 1-1.2 1-2.5'/%3E%3C/svg%3E"); }
.room--bath { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c260' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18v1.5A5.5 5.5 0 0 1 15.5 19h-7A5.5 5.5 0 0 1 3 13.5z'/%3E%3Cpath d='M6 12V6.5a2.5 2.5 0 0 1 5 0'/%3E%3Cpath d='M7 19l-1 2M17 19l1 2'/%3E%3C/svg%3E"); }
.room--bed { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c260' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19V6'/%3E%3Cpath d='M3 15h18v4'/%3E%3Cpath d='M21 15v-2.5A2.5 2.5 0 0 0 18.5 10H11v5'/%3E%3Ccircle cx='7' cy='11.5' r='1.8'/%3E%3C/svg%3E"); }
.room--done { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c260' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16.5 9'/%3E%3C/svg%3E"); }
.room--deep { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c260' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.9 4.6L17.5 9.5l-4.6 1.9L11 16l-1.9-4.6L4.5 9.5l4.6-1.9z'/%3E%3Cpath d='M18.5 14.5l.8 1.9 1.9.8-1.9.8-.8 1.9-.8-1.9-1.9-.8 1.9-.8z'/%3E%3C/svg%3E"); }
.room--deep { background: var(--logo-teal); color: var(--ink-invert); }
.room--deep h3 { color: var(--logo-cream); }
.room--deep h3::before { background-color: var(--logo-gold); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318333c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.9 4.6L17.5 9.5l-4.6 1.9L11 16l-1.9-4.6L4.5 9.5l4.6-1.9z'/%3E%3Cpath d='M18.5 14.5l.8 1.9 1.9.8-1.9.8-.8 1.9-.8-1.9-1.9-.8 1.9-.8z'/%3E%3C/svg%3E"); }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding-left: 1.75rem; margin-bottom: 0.55rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.1rem; height: 1.1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7862a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.room--deep .checks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c260' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* ---- Quote builder, Pricing page ([tiptop_quote], inc/quote.php) ---------- */
.quote-head { padding-bottom: clamp(5rem, 3rem + 6vw, 7rem); }
.quote-band { margin-top: clamp(-6rem, -2rem - 5vw, -4rem); padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); position: relative; }
.qb { scroll-margin-top: 6rem; background: var(--surface); border-radius: 18px; padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.75rem); max-width: 54rem; margin-inline: auto; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 24px 60px -28px rgb(0 0 0 / 0.4); }
.quote__count { font: 700 0.8rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--kicker); margin: 0 0 0.75rem; }
.quote__q { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); margin: 0 0 1.5rem; }
.quote__hint { color: var(--ink-soft); margin: -0.75rem 0 1.25rem; }
.quote__out { margin: 1.25rem 0 0; color: var(--ink-soft); font-size: 0.98rem; }
.quote__out a, .quote__talk a { color: var(--accent); font-weight: 700; }
.quote__next { margin-top: 1.75rem; }

/* Step 1: four tiles with the room cards' icons. */
.quote__tiles { display: grid; gap: 0.85rem; }
@media (min-width: 36em) { .quote__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile, .opt { font: inherit; color: inherit; text-align: left; cursor: pointer; background: var(--ground); border: 2px solid transparent; border-radius: 14px; transition: border-color 0.15s, background 0.15s; }
.tile:hover, .opt:hover, .chip:hover { border-color: var(--logo-gold); }
.tile:focus-visible, .opt:focus-visible, .chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; min-height: 5.5rem; }
.tile::before { content: ""; grid-row: span 2; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--logo-teal) var(--icon) center / 1.7rem no-repeat; }
.tile__name { font-weight: 750; font-size: 1.2rem; letter-spacing: -0.01em; align-self: end; }
.tile__from { color: var(--ink-soft); font-size: 0.95rem; align-self: start; margin-top: 0.15rem; }
.tile--junk { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c260' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16V7h11v9'/%3E%3Cpath d='M13 10h4l3 3.5V16h-7'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.tile--clean { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c260' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-6.5 8 6.5'/%3E%3Cpath d='M6 9.5V20h12V9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.tile--deep { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c260' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.9 4.6L17.5 9.5l-4.6 1.9L11 16l-1.9-4.6L4.5 9.5l4.6-1.9z'/%3E%3Cpath d='M18.5 14.5l.8 1.9 1.9.8-1.9.8-.8 1.9-.8-1.9-1.9-.8 1.9-.8z'/%3E%3C/svg%3E"); }
.tile--move { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c260' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-4.5L21 8v9l-9 4.5L3 17z'/%3E%3Cpath d='M3 8l9 4.5L21 8'/%3E%3Cpath d='M12 12.5v9'/%3E%3C/svg%3E"); }

/* Options */
.quote__options { display: grid; gap: 0.75rem; }
.opt { display: grid; gap: 0.2rem; padding: 1rem 1.2rem; }
.opt b { font-size: 1.1rem; }
.opt span { color: var(--ink-soft); font-size: 0.95rem; }
.opt em { font-style: normal; font-weight: 750; color: var(--accent); font-size: 1.15rem; }
.opt--row { grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center; }
.opt--row b { grid-column: 1; }
.opt--row span { grid-column: 1; }
.opt--row em { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
@media (min-width: 40em) { .quote__options--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quote__options--two .opt { padding: 1.4rem; } }

/* Junk: load sizes drawn as a growing pile. */
@media (min-width: 40em) { .quote__options--loads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quote__options--loads .opt { grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
.quote__options--loads .opt > :not(.load) { grid-column: 2; }
.load { grid-row: span 3; width: 3.25rem; height: 3.25rem; border-radius: 12px; background: var(--logo-teal); position: relative; overflow: hidden; }
.load::after { content: ""; position: absolute; left: 0.45rem; right: 0.45rem; bottom: 0.45rem; height: var(--fill); background: var(--logo-gold); border-radius: 4px; }
.load--1 { --fill: 18%; } .load--2 { --fill: 38%; } .load--3 { --fill: 58%; } .load--4 { --fill: 78%; }

/* Frequency: three price cards, every two weeks in teal. */
.quote__options--freq { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.opt--freq { text-align: center; justify-items: center; padding: 1.25rem 0.5rem; align-content: start; }
.opt--freq b { font-size: 1rem; }
.opt--freq em { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.1; }
.opt--freq.is-popular { background: var(--logo-teal); color: var(--ink-invert); }
.opt--freq.is-popular em { color: var(--logo-gold); }
.opt--freq.is-popular span:not(.opt__flag) { color: #d5e0e2; }
.opt__flag { font: 700 0.65rem/1 var(--sans) !important; letter-spacing: 0.08em; text-transform: uppercase; background: var(--logo-gold); color: var(--logo-teal) !important; padding: 0.35rem 0.55rem; border-radius: 999px; margin-bottom: 0.35rem; }

/* Chips and counters */
.quote__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { font: 600 0.98rem/1.2 var(--sans); color: var(--ink); background: var(--ground); border: 2px solid transparent; border-radius: 999px; padding: 0.8rem 1.1rem; cursor: pointer; min-height: 2.75rem; }
.chip i { font-style: normal; color: var(--ink-soft); font-weight: 600; margin-left: 0.25rem; }
.chip[aria-pressed="true"] { background: var(--logo-teal); color: var(--ink-invert); }
.chip[aria-pressed="true"] i { color: var(--logo-gold); }
.chip[aria-pressed="true"]::before { content: "✓ "; color: var(--logo-gold); }
.chip--big { font-size: 1.1rem; padding: 1rem 1.4rem; }
.quote__counts { display: grid; gap: 0.6rem; margin-top: 1.25rem; }
.stepper { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 0.5rem; background: var(--ground); border-radius: 14px; padding: 0.5rem 0.6rem 0.5rem 1.1rem; }
.stepper span { font-weight: 600; }
.stepper i { display: block; font-style: normal; font-weight: 500; color: var(--ink-soft); font-size: 0.9rem; }
.stepper button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--surface); color: var(--accent); font: 700 1.3rem/1 var(--sans); cursor: pointer; }
.stepper output { min-width: 1.5rem; text-align: center; font-weight: 750; }

/* Result */
.quote__result { text-align: center; }
.quote__price { font: 750 clamp(3.5rem, 2rem + 6vw, 5.5rem)/0.95 var(--sans); letter-spacing: -0.04em; color: var(--accent); margin: 0.25rem 0 0.5rem; }
.quote__per { font-weight: 600; color: var(--ink-soft); margin: 0 0 1.5rem; }
.quote__lines { list-style: none; padding: 0; margin: 0 auto 1.25rem; max-width: 26rem; text-align: left; }
.quote__lines li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.35rem; }
.quote__lines li span:last-child { font-weight: 700; white-space: nowrap; }
.quote__note { color: var(--ink-soft); max-width: 32rem; margin: 0 auto 1.5rem; }
.quote__note:empty { display: none; }
.quote__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.quote__actions .button--line { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.quote__actions .button--line:hover { background: var(--accent-quiet); color: var(--accent); }
.chip { text-align: left; }
.quote__fine { font-size: 0.92rem; color: var(--ink-faint); margin: 1.25rem 0 0; }

.quote__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.75rem; padding-top: 1.25rem; box-shadow: 0 -1px 0 var(--rule); }
.quote__back { font: 700 0.98rem/1 var(--sans); color: var(--accent); background: none; border: 0; padding: 0.75rem 0; cursor: pointer; }
.quote__talk { margin: 0 0 0 auto; color: var(--ink-soft); font-size: 0.95rem; }

/* The full list below, one tap away. */
.all-prices-head { padding-bottom: 0; }
.all-prices-head h2 { margin-bottom: 1rem; }
.all-prices-head__jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.all-prices-head__jump a { font: 600 0.92rem/1 var(--sans); color: var(--accent); background: var(--surface); text-decoration: none; padding: 0.7rem 1rem; border-radius: 999px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); }

@media (max-width: 30em) {
	.quote__options--freq { grid-template-columns: 1fr; }
	.opt--freq { grid-template-columns: 1fr auto; text-align: left; justify-items: start; padding: 1rem 1.2rem; }
	.opt--freq em { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
	.opt__flag { grid-column: 1; }
	.quote__talk { margin-left: 0; }
}
a.tile { text-decoration: none; color: inherit; }
a.tile:hover { color: inherit; }
.quote__q:focus, .quote__price:focus { outline: none; }

/* ---- A review under the hero photo (Joe, 2026-10-13) ---------------------- */
.hero-review { margin: 1.25rem 0 0; padding: 1.25rem 1.4rem; background: rgb(255 255 255 / 0.07); border: 0; border-radius: var(--radius); color: #e9efe9; }
.hero-review::before { content: "★★★★★"; display: block; color: var(--logo-gold); letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.hero-review p { margin: 0 0 0.6rem; font-size: 1.02rem; line-height: 1.5; }
.hero-review cite { font-size: 0.88rem; font-weight: 600; font-style: normal; color: var(--logo-cream); }
@media (max-width: 52em) {
	/* Phone: the photo first, then the words, then the review. */
	.hero__photo { display: contents; }
	.hero__photo > figure { order: -1; }
	.hero-review { order: 1; margin-top: 0; }
}

/* ---- Instagram posts on Before & After ------------------------------------ */
.gallery--ig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 44em) { .gallery--ig { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery--ig img { aspect-ratio: 1; transition: opacity 0.15s; }
.ig-post a { position: relative; display: block; border-radius: var(--radius); }
.ig-post a:hover img { opacity: 0.85; }
.ig-post a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Reels get a small play mark, as on Instagram. */
.ig-post--reel a::after { content: ""; position: absolute; top: 0.6rem; right: 0.6rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgb(0 0 0 / 0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 7v10l8-5z'/%3E%3C/svg%3E") center / 1.1rem no-repeat; }

/* The request form at the end of the quote builder (inc/request.php, a Site Basics form). */
.quote__summary { font-weight: 600; color: var(--ink-soft); margin: -0.75rem 0 1.5rem; }
.quote__summary:empty { display: none; }
.qb .joes-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; max-width: 40rem; }
@media (min-width: 36em) {
	.qb .joes-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qb .joes-form > * { grid-column: 1 / -1; }
	.qb .joes-form > .joes-form__field:has([name="first_name"], [name="last_name"], [name="city"], [name="zip"]) { grid-column: auto; }
}
.qb .joes-form__field { margin: 0 0 1.1rem; }
.qb .joes-form__field > label, .qb .joes-form__field legend { font: 600 0.95rem/1.3 var(--sans); margin-bottom: 0.4rem; }
.qb .joes-form__desc { font-size: 0.9rem; color: var(--ink-faint); opacity: 1; }
.qb .joes-form input[type="text"], .qb .joes-form input[type="email"], .qb .joes-form input[type="tel"], .qb .joes-form textarea {
	width: 100%; max-width: none; font: 400 1rem/1.4 var(--sans); color: var(--ink); background: var(--surface);
	border: 2px solid var(--rule); border-radius: var(--radius); padding: 0.75rem 0.85rem;
}
.qb .joes-form textarea { min-height: 7rem; resize: vertical; }
.qb .joes-form input:focus-visible, .qb .joes-form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
/* Radio and checkbox answers as tappable chips, like the builder's own. */
.qb .joes-form fieldset.joes-form__field { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.qb .joes-form fieldset.joes-form__field legend { width: 100%; float: left; }
.qb .joes-form fieldset.joes-form__field > .joes-form__desc, .qb .joes-form fieldset.joes-form__field > .joes-form__error { width: 100%; }
.qb .joes-form fieldset.joes-form__field label { position: relative; margin: 0; font: 600 0.95rem/1.2 var(--sans); background: var(--ground); border: 2px solid transparent; border-radius: 999px; padding: 0.7rem 1rem; cursor: pointer; }
.qb .joes-form fieldset.joes-form__field label:has(input:checked) { background: var(--logo-teal); color: var(--ink-invert); }
.qb .joes-form fieldset.joes-form__field label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.qb .joes-form fieldset.joes-form__field input { position: absolute; opacity: 0; pointer-events: none; }
.qb .joes-form__field--photos input[type="file"] { font: 400 0.95rem/1.3 var(--sans); max-width: 100%; }
.qb .joes-form__photo-remove { border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.92); color: var(--ink); }
.qb .joes-form__actions { margin: 0.5rem 0 0; }
.qb .joes-form button[type="submit"] {
	font: 600 1rem/1 var(--sans); background: var(--book-bg); border: 1px solid var(--book-bg); color: var(--book-ink);
	border-radius: 999px; padding: 1rem 1.75rem; cursor: pointer; min-height: 3rem;
}
.qb .joes-form button[type="submit"]:hover { background: var(--book-bg-hover); border-color: var(--book-bg-hover); }
.qb .joes-form button[type="submit"]:disabled { opacity: 0.6; cursor: wait; }
.qb .joes-form__status { font-weight: 600; margin-top: 1rem; }
.qb .joes-form__status[data-state="sent"] { font-size: 1.15rem; color: var(--ink); }
.qb .joes-form fieldset.joes-form__field legend { padding: 0; }
.qb .joes-form__field--photos input[type="file"]::file-selector-button {
	font: 600 0.95rem/1.2 var(--sans); color: var(--ink); background: var(--ground); border: 2px solid var(--rule);
	border-radius: 999px; padding: 0.7rem 1.1rem; margin-right: 0.75rem; cursor: pointer;
}
.qb .joes-form__field--photos input[type="file"]::file-selector-button:hover { border-color: var(--logo-gold); }
.quote__request { scroll-margin-top: 7rem; }