/* Theme-authored additions.
   The other stylesheets in this folder are the design's own layers and are kept
   byte-for-byte as delivered; anything written for this build goes here so it
   loads last and never has to be merged back into them. */

/* Third-party feed embeds (Elfsight Instagram) sit where the manual tile grid
   used to, so give them the same rhythm and let the widget size itself. */
.ig-feed--embed {
	margin-top: 18px;
	width: 100%;
}

.ig-feed--embed > div,
.ig-feed--embed iframe {
	width: 100%;
	max-width: 100%;
}

/* The widget renders asynchronously; hold a little height so the section does
   not jump when it loads. */
.ig-feed--embed .elfsight-app-eb184f53-5da4-4e30-8c2f-46e330f427ed:empty,
.ig-feed--embed [class^="elfsight-app-"]:empty {
	display: block;
	min-height: 320px;
}

/* ==========================================================================
   Closing CTA band spacing

   Both CTA bands ship with no vertical padding of their own: the interior one
   inherits .loc-map's `padding: 0 0 var(--sec-y)` and the homepage one is
   reset to `padding: 0`. Their cards therefore land flush against the section
   boundary above, and because the card and the preceding section share a pale
   background the two read as one block. Give them the same section rhythm the
   rest of the page uses; --sec-y already steps down at the breakpoints.
   ========================================================================== */
.pg-cta-band,
.ctaband {
	padding-top: var(--sec-y);
	padding-bottom: var(--sec-y);
}

/* ==========================================================================
   Blog post meta and sidebar

   The design set shipped no single-post layout, so this reuses the interior
   page shell: .pg-body-grid is already a 1.35fr / .85fr grid that collapses to
   one column, and the sidebar fills the column the design used for its figure.
   ========================================================================== */

/* --- post meta line in the hero --- */
.pg-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--muted);
}

.pg-meta a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ink-3);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}

.pg-meta a:hover {
	color: var(--blue);
	border-bottom-color: rgba(28, 126, 214, .5);
}

.pg-meta svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--blue);
}

.pg-meta-sep {
	color: var(--muted-2);
}

/* --- categories under the article --- */
.pg-post-cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 30px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 14px;
}

.pg-post-cats > span {
	color: var(--muted);
}

.pg-body .pg-post-cats a {
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink-2);
	font-weight: 600;
	text-decoration: none;
}

.pg-body .pg-post-cats a:hover {
	border-color: var(--blue);
	background: var(--blue-pale);
	color: var(--blue-d);
}

/* --- sidebar --- */
.pg-side {
	position: sticky;
	top: calc(var(--hdr) + 26px);
	display: grid;
	gap: 22px;
	align-content: start;
	min-width: 0;
}

.pg-side-box {
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--paper);
	box-shadow: var(--sh);
}

.pg-body .pg-side-h {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font: 700 19px/1.2 var(--f-head);
	letter-spacing: .01em;
	text-transform: uppercase;
}

/* search */
.tkb-search {
	display: flex;
	gap: 8px;
}

.tkb-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 13px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper-2);
	color: var(--ink);
	font: 400 15px/1.3 var(--f-body);
}

.tkb-search input[type="search"]:focus {
	outline: none;
	border-color: var(--blue);
	background: var(--paper);
	box-shadow: 0 0 0 3px rgba(28, 126, 214, .16);
}

.tkb-search button {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	border: 0;
	border-radius: var(--r-sm);
	background: var(--blue);
	color: #fff;
	cursor: pointer;
	transition: background .18s ease;
}

.tkb-search button:hover {
	background: var(--blue-d);
}

.tkb-search button svg {
	width: 19px;
	height: 19px;
}

/* The .pg-body prose styles give every list a blue dot and left indent; the
   sidebar lists are navigation, not prose, so opt them back out. */
.pg-body .pg-side ul,
.pg-body .pg-side ol {
	display: block;
	gap: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-body .pg-side ul > li,
.pg-body .pg-side ol > li {
	padding-left: 0;
	font-size: inherit;
	line-height: inherit;
}

.pg-body .pg-side ul > li::before,
.pg-body .pg-side ol > li::before {
	content: none;
}

/* recent posts */
.pg-side-posts,
.pg-side-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-side-posts li + li {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.pg-body .pg-side-posts a {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	text-decoration: none;
	border: 0;
}

.pg-side-thumb {
	flex: none;
	width: 62px;
	height: 62px;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--paper-2);
}

.pg-side-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pg-side-post {
	display: block;
	min-width: 0;
}

.pg-side-title {
	display: block;
	color: var(--ink);
	font: 600 15px/1.4 var(--f-body);
	transition: color .18s ease;
}

.pg-body .pg-side-posts a:hover .pg-side-title {
	color: var(--blue);
}

.pg-side-date {
	display: block;
	margin-top: 4px;
	color: var(--muted-2);
	font-size: 12.5px;
}

/* categories and archives */
.pg-side-list li + li {
	margin-top: 2px;
}

.pg-body .pg-side-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--r-sm);
	color: var(--ink-3);
	font-size: 14.5px;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.pg-body .pg-side-list a:hover,
.pg-side-list li.is-current > a {
	background: var(--blue-pale);
	color: var(--blue-d);
}

.pg-side-list b {
	flex: none;
	min-width: 26px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--paper-2);
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.pg-body .pg-side-list a:hover b,
.pg-side-list li.is-current > a b {
	background: rgba(28, 126, 214, .16);
	color: var(--blue-d);
}

/* wp_get_archives prints the post count as a bare "(3)" text node after the
   link, so the row itself has to be the flex container. */
.pg-side-archive li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-right: 12px;
	border-radius: var(--r-sm);
	color: var(--muted-2);
	font-size: 13px;
	transition: background .18s ease;
}

.pg-side-archive li:hover {
	background: var(--blue-pale);
}

.pg-body .pg-side-archive a {
	flex: 1 1 auto;
	padding-right: 0;
	background: none;
}

.pg-body .pg-side-archive li:hover a {
	background: none;
	color: var(--blue-d);
}

@media (max-width: 1080px) {
	.pg-side {
		position: static;
	}
}

/* --- blog card date is now a link --- */
.bcard-date a {
	color: inherit;
	text-decoration: none;
	border: 0;
	transition: color .18s ease;
}

.bcard-date a:hover {
	color: var(--blue);
	text-decoration: underline;
}

/* ==========================================================================
   Client review, 09 Sep 2026 — everything below answers a marked-up point on
   "Homepage-Redesign-09-09-2026". Kept in this file so the design's own
   layers stay as delivered.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sticky header

   design.css already asks for position:sticky, but Part F sets
   `html,body{overflow-x:hidden}` to contain the off-canvas nav, and an
   overflow value other than visible on the root turns the whole document into
   a scroll container — which is exactly the thing that stops sticky sticking.
   `clip` contains the overflow the same way without creating that scroll
   container, so the nav bar holds the top of the screen again.
   -------------------------------------------------------------------------- */
@supports (overflow: clip) {
	html,
	body {
		overflow-x: clip;
	}
}

.tkb-head {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 60;
	transition: box-shadow .22s ease;
}

/* --------------------------------------------------------------------------
   Point: "Mobile Menu — make sure the Services menu is visible and accessible"

   The two menus were both position:fixed at inset:0 0 0 auto, so the
   secondary nav painted straight over the primary one and Services and
   Service Areas were unreachable. They now share a single panel: on desktop
   the wrapper is display:contents, so the existing order:1 / logo / order:3
   layout is untouched; on phones the wrapper *is* the drawer.
   -------------------------------------------------------------------------- */
.tkb-navs {
	display: contents;
}

.tkb-nav-close {
	display: none;
}

@media (max-width: 880px) {
	.tkb-navs {
		display: block;
		position: fixed;
		inset: 0 0 0 auto;
		width: min(380px, 90vw);
		z-index: 80;
		background: #fff;
		padding: 74px 20px 32px;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform .3s ease, visibility .3s;
		box-shadow: -20px 0 50px rgba(11, 31, 51, .18);
	}

	.tkb-navs.is-open {
		visibility: visible;
		transform: none;
	}

	/* the two navs are now ordinary blocks stacked inside that one panel */
	.tkb-nav,
	.tkb-nav.tkb-nav-right {
		position: static;
		visibility: visible;
		width: auto;
		padding: 0;
		background: none;
		box-shadow: none;
		transform: none;
		overflow: visible;
		transition: none;
	}

	.tkb-nav.tkb-nav-right {
		margin-top: 6px;
		padding-top: 14px;
		border-top: 1px solid var(--line);
	}

	.tkb-nav-close {
		display: grid;
		place-items: center;
		position: absolute;
		top: 16px;
		right: 16px;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid var(--line);
		border-radius: var(--r-sm);
		background: #fff;
		color: var(--ink);
		cursor: pointer;
	}

	.tkb-nav-close svg {
		width: 17px;
		height: 17px;
	}

	/* Submenus become accordions. A hover-only dropdown is unreachable on
	   touch, but leaving all fourteen service links expanded made the drawer
	   several screens long — so each parent gets a toggle and opens on tap.
	   assets/js/nav.js adds the buttons and the has-sub / is-open classes. */
	.tkb-menu .sub-menu,
	.tkb-menu > li.mega-menu > .sub-menu,
	.tkb-menu > li.mega-menu2 > .sub-menu {
		position: static !important;
		display: none;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0;
		box-shadow: none;
		border: 0;
		border-left: 2px solid #e6edf6;
		border-radius: 0;
		padding: 2px 0 8px 10px;
		margin: 0 0 8px 16px;
		background: transparent;
	}

	.tkb-menu li.is-open > .sub-menu {
		display: block;
		animation: tkb-sub-in .22s ease both;
	}

	/* rows: link on the left, toggle on the right */
	.tkb-navs .tkb-menu li {
		position: relative;
	}

	.tkb-navs .tkb-menu li.has-sub > a {
		padding-right: 52px;
	}

	.tkb-sub-toggle {
		display: grid;
		place-items: center;
		position: absolute;
		top: 3px;
		right: 0;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: var(--r-sm);
		background: transparent;
		color: var(--ink-2);
		cursor: pointer;
	}

	.tkb-sub-toggle::before {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-3px) rotate(45deg);
		transition: transform .22s ease;
	}

	.tkb-sub-toggle[aria-expanded="true"] {
		color: var(--blue);
	}

	.tkb-sub-toggle[aria-expanded="true"]::before {
		transform: translateY(1px) rotate(-135deg);
	}

	/* the theme's own caret is replaced by the toggle */
	.tkb-menu > li.menu-item-has-children > a::after {
		display: none;
	}

	.tkb-menu > li + li {
		border-top: 1px solid #f1f5f9;
	}

	.tkb-menu > li > a {
		padding: 14px 12px;
		font-size: 16.5px;
		font-weight: 700;
	}

	.tkb-menu .sub-menu > li > a {
		padding: 11px 12px;
		font-size: 15px;
		font-weight: 600;
	}

	.tkb-menu .sub-menu .sub-menu > li > a {
		font-size: 14.5px;
		font-weight: 500;
		color: var(--muted);
	}

	.tkb-menu .sub-menu li + li {
		border-top: 0;
	}

	/* second-level toggles sit a touch smaller */
	.tkb-menu .sub-menu .tkb-sub-toggle {
		width: 40px;
		height: 40px;
		top: 1px;
	}

	.tkb-nav-foot {
		display: grid;
		gap: 10px;
		margin-top: 22px;
	}

	.tkb-nav-foot .tkb-btn {
		width: 100%;
	}

	/* the page behind the drawer must not scroll with it */
	body.tkb-nav-open {
		overflow: hidden;
	}
}

/* --------------------------------------------------------------------------
   Point 8: "MOBILE — add a free estimate button to the top and bottom"

   Top: alongside the phone number in the utility bar.
   Bottom: the floating call / estimate pair, which the design ships but never
   switches on.
   -------------------------------------------------------------------------- */
.tkb-util-cta {
	display: none;
}

@media (max-width: 880px) {
	.tkb-util-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 11px 20px;
		border-radius: 999px;
		background: var(--blue);
		color: #fff !important;
		font-size: 14.5px;
		font-weight: 800;
		line-height: 1;
		text-decoration: none !important;
		white-space: nowrap;
		box-shadow: 0 8px 20px rgba(28, 126, 214, .30);
	}

	.tkb-util-cta::before {
		content: "";
		width: 15px;
		height: 15px;
		flex: none;
		background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat;
	}

	.tkb-util-cta:hover {
		background: var(--blue-d);
	}

	/* --- bottom bar --- */
	.tkb-float {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 70;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .96);
		backdrop-filter: saturate(140%) blur(10px);
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 22px rgba(11, 31, 51, .12);
	}

	.tkb-float a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		padding: 0 14px;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 800;
		line-height: 1.1;
		text-align: center;
		text-decoration: none;
	}

	.tkb-float-call {
		background: var(--ink);
		color: #fff;
	}

	.tkb-float-cta {
		background: var(--blue);
		color: #fff;
		box-shadow: 0 8px 20px rgba(28, 126, 214, .28);
	}

	/* room for the bar, and the side tab and chat bubble sit above it */
	body {
		padding-bottom: 70px;
	}

	.tkb-quotetab {
		display: none;
	}

	.tkb-totop {
		bottom: 84px;
	}

	#chat-widget-container,
	.chat-widget-container {
		bottom: 78px !important;
	}
}

/* --------------------------------------------------------------------------
   Point: "Back to Top on both desktop and mobile"

   The button was in the markup with nothing to show it; assets/js/ui.js now
   drives it, and this is the fade that goes with the class it toggles.
   -------------------------------------------------------------------------- */
.tkb-totop {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}

.tkb-totop.is-on {
	opacity: 1;
	transform: none;
}

.tkb-totop.is-on:hover {
	transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   Points 2 + "use the popup from the live site": the estimate modal

   Every estimate CTA now opens this instead of the slide-out drawer, matching
   the live site's #form-popup.
   -------------------------------------------------------------------------- */
.tkb-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	padding: 24px 16px;
}

.tkb-modal[hidden] {
	display: none;
}

.tkb-modal-scrim {
	position: absolute;
	inset: 0;
	background: rgba(7, 22, 37, .58);
	opacity: 0;
	transition: opacity .25s ease;
}

.tkb-modal.is-open .tkb-modal-scrim {
	opacity: 1;
}

.tkb-modal-dialog {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba(7, 22, 37, .40);
	opacity: 0;
	transform: translateY(14px) scale(.985);
	transition: opacity .25s ease, transform .25s ease;
}

.tkb-modal.is-open .tkb-modal-dialog {
	opacity: 1;
	transform: none;
}

.tkb-modal-body {
	padding: 30px 28px 24px;
}

.tkb-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--paper-2);
	color: var(--ink);
	cursor: pointer;
	transition: background-color .2s ease;
}

.tkb-modal-close:hover {
	background: #e4eaf1;
}

.tkb-modal-close svg {
	width: 16px;
	height: 16px;
}

.tkb-modal .tkb-quote-card {
	background: transparent;
	box-shadow: none;
	border: 0;
	padding: 0;
	margin: 0;
}

.tkb-modal .tkb-quote-h {
	margin: 0 0 6px;
	padding-right: 34px;
	font-size: clamp(24px, 3vw, 31px);
	line-height: 1.1;
}

.tkb-modal .tkb-quote-sub {
	margin: 0 0 14px;
	font-size: 15px;
	color: var(--muted);
}

.tkb-modal .tkb-quote-fine {
	margin: 12px 0 0;
	font-size: 12.5px;
	color: var(--muted-2);
}

body.tkb-modal-open {
	overflow: hidden;
}

@media (max-width: 560px) {
	.tkb-modal {
		padding: 0;
	}

	.tkb-modal-dialog {
		width: 100%;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
	}

	.tkb-modal-body {
		padding: 26px 18px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tkb-modal-scrim,
	.tkb-modal-dialog,
	.tkb-totop {
		transition: none;
	}
}

/* --- the side tab that opens it, in place of the old drawer handle --- */
.tkb-quotetab {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 90;
	transform: translateY(-50%);
}

.tkb-quotetab-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 48px;
	padding: 36px 0;
	border: 0;
	border-radius: 10px 0 0 10px;
	background: var(--blue);
	color: #fff;
	font: 800 13px/1 var(--f-body);
	letter-spacing: .13em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	box-shadow: -6px 0 20px rgba(11, 31, 51, .22);
	transition: background-color .2s ease;
}

.tkb-quotetab-btn:hover {
	background: var(--blue-d);
}

.tkb-quotetab-btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   Points 10 + 12: the "Tell us about the tub" band

   The copy sat hard against the left edge of the card with the right third
   empty, so it read as a half-finished two-column layout. It is now one
   centred column with even padding, and the photo runs the full width behind
   it instead of only the right-hand side.
   -------------------------------------------------------------------------- */
.cb-card {
	display: block;
	padding: clamp(38px, 5vw, 62px) clamp(24px, 4.5vw, 60px);
	text-align: center;
}

.cb-shot {
	inset: 0;
	width: 100%;
}

.cb-shot::after {
	background: linear-gradient(180deg, rgba(11, 31, 51, .90) 0%, rgba(11, 31, 51, .82) 55%, rgba(11, 31, 51, .90) 100%);
}

.cb-main {
	max-width: 820px;
	margin: 0 auto;
}

.ctaband .eyebrow {
	justify-content: center;
}

.ctaband .eyebrow::before {
	content: "";
	height: 1.5px;
	width: 46px;
	background: var(--gold);
	opacity: .7;
}

.cb-sub {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

.cb-feats {
	margin-top: 6px;
	text-align: center;
}

.cb-feats .cbf-h {
	justify-content: center;
}

.cb-actions {
	max-width: 460px;
	margin: 30px auto 0;
	padding: 22px;
}

.cb-fine {
	justify-content: center;
	text-align: center;
}

@media (max-width: 780px) {
	.cb-feats {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.cb-feats li {
		padding: 0;
	}

	.cb-feats li + li {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .16);
		padding-top: 16px;
	}
}

/* --------------------------------------------------------------------------
   Point 10: FAQ heading centred, and the "Still have a question" bar narrowed

   The FAQ header was the one section head on the homepage still ranged left.
   -------------------------------------------------------------------------- */
.faq .sec-head {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.faq .sec-head h2::after {
	margin-left: auto;
	margin-right: auto;
}

.faq .sec-sub {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

.faq-list {
	max-width: 940px;
	margin-left: auto;
	margin-right: auto;
}

.faq-cta {
	max-width: 940px;
	margin: 30px auto 0;
	padding: 18px 22px;
	gap: 16px;
}

.faq-cta .fq-txt {
	min-width: 160px;
}

.faq-cta .tkb-btn {
	padding: 13px 20px;
	font-size: 14.5px;
}

/* Point 10: the blog band header, centred with the rest of the page */
.tkb-blog .blog-head {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.tkb-blog .blog-head .eyebrow {
	justify-content: center;
}

.tkb-blog .blog-head .sec-sub {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   Point 9: "add a border to the white button"

   .svc-btn-ghost is white on white in the hero and on the pale bands, so the
   1px #d7e2ee edge it shipped with all but disappears. Give it a real one.
   -------------------------------------------------------------------------- */
.svc-btn-ghost {
	border-width: 2px;
	border-color: var(--ink-2);
	color: var(--ink);
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(11, 31, 51, .10);
}

.svc-btn-ghost:hover {
	border-color: var(--blue);
	background: #fff;
	color: var(--blue);
}

/* --------------------------------------------------------------------------
   Point 7: a call to action under the service-page "How It Works" steps
   -------------------------------------------------------------------------- */
.svc-proc-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 34px;
	padding-top: 28px;
	border-top: 1px solid rgba(11, 31, 51, .10);
}

@media (max-width: 700px) {
	.svc-proc-cta {
		margin-top: 26px;
		padding-top: 22px;
	}

	.svc-proc-cta .svc-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Point 4: "adjust the spacing here" — the Service FAQs sidebar card

   The line-art tub is 190px tall and absolutely placed, but the card had no
   top padding to answer it, so the eyebrow started a third of the way down an
   otherwise empty panel. Pull the copy up and settle the art behind it.
   -------------------------------------------------------------------------- */
.svc-cta {
	padding: 30px 30px 32px;
}

.svc-cta-leaf {
	right: -22px;
	bottom: -28px;
	width: 150px !important;
	opacity: .38;
}

.svc-cta .svc-eyebrow {
	margin-top: 0;
	margin-bottom: 10px;
}

.svc-cta h2 {
	margin-bottom: 10px;
}

.svc-cta p {
	margin-bottom: 18px;
	max-width: 46ch;
}

.svc-cta-btns {
	gap: 10px;
}

/* --------------------------------------------------------------------------
   Point 6: "Bathtub Options to Suit Your Style" — spacing

   The prose column is capped at 72ch inside a 1180px wrap, which left the
   right-hand third of every body block empty and the block itself floating in
   a section far taller than its content. Centre the measure and bring the
   section rhythm back in line with the bands either side of it.
   -------------------------------------------------------------------------- */
.svc-body {
	padding-top: calc(var(--sec-y) * .78);
	padding-bottom: calc(var(--sec-y) * .78);
}

.svc-body-grid {
	max-width: 860px;
}

.svc-block > p,
.svc-block > ul,
.svc-block > ol {
	max-width: none;
}

.svc-block + .svc-block {
	margin-top: 38px;
}

.svc-block > ul {
	margin: 12px 0 0;
	gap: 10px;
}

.svc-block > ul > li {
	line-height: 1.62;
}

/* --------------------------------------------------------------------------
   Point 3: the closing "Schedule Your Free Estimate" band

   The empty half of the card now holds the estimate form itself.
   -------------------------------------------------------------------------- */
.pg-cta-band .loc-cta-has-form {
	padding: clamp(34px, 4vw, 48px) clamp(22px, 3.5vw, 44px);
}

.loc-cta-form {
	width: min(660px, 100%);
	margin: 12px auto 12px;
	padding: 30px 20px 14px; 
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(11, 31, 51, .10);
	text-align: left;
}

.loc-cta-form .tkb-quote-embed {
	width: 100%;
}

.loc-cta-call {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 14.5px;
	color: var(--ink-3);
}

.loc-cta-call svg {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: var(--blue-d);
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.loc-cta-call a {
	color: var(--blue-d);
	font-weight: 800;
	text-decoration: none;
}

.loc-cta-call a:hover {
	text-decoration: underline;
}

.loc-cta-has-form .loc-cta-leaf {
	width: 150px !important;
	opacity: .3;
}

/* --------------------------------------------------------------------------
   Corrections found while testing the two fixes above.
   -------------------------------------------------------------------------- */

/* The header carries backdrop-filter, and any filter on an ancestor makes that
   ancestor the containing block for position:fixed descendants — which pinned
   the off-canvas panel inside the 80px-tall header instead of the viewport.
   The bar is opaque white below the nav breakpoint anyway, so the blur buys
   nothing there. */
@media (max-width: 880px) {
	.tkb-head {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* design.css styles every direct link in the utility bar as the dark phone
   pill, ::before icon and all, and wins on specificity. Match it. */
.tkb-util .tkb-util-right > .tkb-util-cta {
	display: none;
}

@media (max-width: 880px) {
	.tkb-util .tkb-util-right > .tkb-util-cta {
		display: inline-flex;
		background: var(--blue);
	}

	.tkb-util .tkb-util-right > .tkb-util-cta:hover {
		background: var(--blue-d);
	}

	.tkb-util .tkb-util-right > .tkb-util-cta::before {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
	}
}

/* Keep call and estimate side by side rather than stacking the utility bar
   into three full-width rows on a phone. */
@media (max-width: 640px) {
	.tkb-util .tkb-util-right {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

	.tkb-util .tkb-util-note {
		flex: 1 0 100%;
		text-align: center;
	}

	.tkb-util .tkb-util-right > a {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		padding-left: 14px;
		padding-right: 14px;
		font-size: 14px;
		white-space: nowrap;
	}
}

/* room for the close button */
.tkb-modal .tkb-quote-h {
	padding-right: 52px;
}

/* .tkb-head is position:sticky with z-index:60, which makes it a stacking
   context: the drawer inside it can never paint above a sibling of the header
   with a higher z-index, however large its own. The scrim was one such
   sibling at 75, so it greyed out the panel it was meant to sit behind. Drop
   the scrim below the header instead of fighting it. */
@media (max-width: 880px) {
	.tkb-nav-scrim {
		z-index: 50;
	}

	body.tkb-nav-open .tkb-float {
		display: none;
	}
}

/* The GoHighLevel embed sizes itself once its script has answered, so hold a
   sensible height in the meantime rather than letting the dialog collapse to
   the heading. */
.tkb-modal .tkb-quote-embed,
.loc-cta-form .tkb-quote-embed {
	min-height: 520px;
}

/* The chat bubble already owns the bottom-right corner, so stack back-to-top
   above it instead of underneath it. */
.tkb-totop {
	right: 22px;
	bottom: 100px;
}

@media (max-width: 880px) {
	.tkb-totop {
		right: 14px;
		bottom: 150px;
	}
}

/* The dead space at the top of that card was the line-art tub sitting in the
   flow: service.css sets `.svc-cta-leaf{position:absolute}` and then
   `.svc-cta > *{position:relative}` four lines later, which wins on equal
   specificity and drops a 165px-tall decoration above the eyebrow. Put it
   back behind the copy where it was drawn to sit. */
.svc-cta > .svc-cta-leaf {
	position: absolute;
	z-index: 0;
}

/* The GoHighLevel chat bubble is a custom element with its own shadow root, so
   it cannot be moved from here — leave it the bottom-right corner and keep the
   bar's buttons clear of it instead. */
@media (max-width: 880px) {
	.tkb-float {
		padding-right: 78px;
	}

	/* The spacer that stops the bar covering the last row of the footer reads
	   better as part of the footer than as a white strip under it. */
	body {
		padding-bottom: 0;
	}

	.tkb-foot {
		padding-bottom: 74px;
	}
}

/* ==========================================================================
   Mobile pass — menu dropdowns and section alignment
   ========================================================================== */

/* the accordion's open animation, used by the drawer submenus */
@keyframes tkb-sub-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* The toggle only exists inside the off-canvas drawer; on desktop the
   dropdowns are hover/focus panels and the button must never show. */
@media (min-width: 881px) {
	.tkb-sub-toggle {
		display: none;
	}
}

@media (max-width: 880px) {

	/* design.css Part D restyles .tkb-menu after the mobile block, and its
	   `align-items:center` survives into the drawer — which shrank every row
	   to its own text width and centred it. Rows are full-width and ranged
	   left in a vertical menu. */
	.tkb-navs .tkb-menu {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 0;
	}

	.tkb-navs .tkb-menu > li,
	.tkb-navs .tkb-menu .sub-menu > li {
		width: 100%;
	}

	.tkb-navs .tkb-menu a {
		justify-content: flex-start;
		text-align: left;
	}

	/* --------------------------------------------------------------
	   Intro: "Not sure which you need?" card

	   The card is absolutely placed to overlap the photo's corner, which
	   works beside a half-width image and not under a full-width one — it
	   hung off both edges and covered the picture. Below the breakpoint it
	   sits under the photo as its own block.
	   -------------------------------------------------------------- */
	.intro-art {
		display: flex;
		flex-direction: column;
	}

	.intro-badge {
		position: static;
		width: auto;
		margin: -22px 14px 0;
	}

	/* --------------------------------------------------------------
	   About: the "New Orleans / locally owned" badge, same problem
	   -------------------------------------------------------------- */
	.ab-stat {
		position: static;
		width: auto;
		margin: -22px 14px 0;
	}

	.ab-art {
		display: flex;
		flex-direction: column;
	}

	/* --------------------------------------------------------------
	   Service Areas: the second button is .tkb-btn-ink — navy on a navy
	   band, so "Call us today" read as loose text with no button at all.
	   Outline it, and let both run full width.
	   -------------------------------------------------------------- */
	.ar-ctas {
		display: grid;
		gap: 10px;
	}

	.ar-ctas .tkb-btn {
		width: 100%;
		justify-content: center;
	}

	/* --------------------------------------------------------------
	   CTA band: the eyebrow's flanking rules pushed a two-line label
	   off centre. Drop them and let the label centre on its own.
	   -------------------------------------------------------------- */
	.ctaband .eyebrow::before,
	.ctaband .eyebrow::after {
		display: none;
	}

	.ctaband .eyebrow {
		gap: 0;
		text-align: center;
	}

	.cb-actions {
		max-width: none;
	}

	/* --------------------------------------------------------------
	   Buttons: stack the pairs full width instead of leaving one short
	   button ranged left under a full-width one.
	   -------------------------------------------------------------- */
	.ab-ctas,
	.gal-cta,
	.blog-more,
	.faq-cta,
	.svc-help .sh-act {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.ab-ctas .tkb-btn,
	.hero-ctas .tkb-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* The band is dark, so this button needs a light outline everywhere, not
   only on phones — navy on navy was invisible at every width. */
.areas .ar-ctas .tkb-btn-ink {
	background: transparent;
	border-color: rgba(220, 238, 255, .55);
	color: #fff;
}

.areas .ar-ctas .tkb-btn-ink:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
}

/* The white buttons on pale bands get the same visible edge the service
   pages' ghost button now has (client point 9). */
.pc-btns .pc-call,
.ab-ctas .ab-call {
	border-width: 2px;
	border-color: var(--ink-2);
	color: var(--ink);
	font-weight: 700;
}

.pc-btns .pc-call:hover,
.ab-ctas .ab-call:hover {
	border-color: var(--blue);
	color: var(--blue);
}

/* The blog eyebrow had a trailing rule and no leading one, which reads as a
   mistake now the header is centred. Give it the pair the other sections use. */
.tkb-blog .eyebrow::before {
	content: "";
	height: 1.5px;
	width: 34px;
	background: var(--blue-d);
	opacity: .55;
}

@media (max-width: 640px) {
	.tkb-blog .eyebrow::before {
		width: 18px;
	}
}

/* --------------------------------------------------------------------------
   "How It Works" CTA row, centred under the steps.
   -------------------------------------------------------------------------- */
.svc-proc-cta {
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Footer: room for the link columns

   Four menu columns share the middle 1.6fr of a 1180px wrap, which left each
   about 95px wide — the headings wrapped mid-phrase and the columns read as
   one run-on list. Widen the footer's own wrap (the rest of the site keeps
   the 1180px measure), rebalance the three bands and open up the gutters.
   -------------------------------------------------------------------------- */
.tkb-foot .tkb-wrap {
	max-width: 1320px;
}

.tkb-foot .tkb-foot-grid {
	grid-template-columns: 0.95fr 2.2fr 0.95fr;
	gap: 40px 60px;
}

/* five icons on one row in the narrower brand column */
.tkb-foot .tkb-social {
	gap: 10px;
	flex-wrap: nowrap;
}

.tkb-foot .tkb-foot-links {
	gap: 24px 34px;
}

.tkb-foot .tkb-foot-col {
	min-width: 0;
}

.tkb-foot .tkb-foot-h {
	margin-bottom: 16px;
	text-wrap: balance;
}

.tkb-foot .tkb-foot-menu a {
	display: inline-block;
}

@media (max-width: 1200px) {
	.tkb-foot .tkb-foot-grid {
		gap: 36px 44px;
	}

	.tkb-foot .tkb-foot-links {
		gap: 22px 26px;
	}
}

@media (max-width: 1080px) {
	.tkb-foot .tkb-foot-grid {
		grid-template-columns: 1fr 1fr;
		gap: 38px 44px;
	}
}

@media (max-width: 780px) {
	.tkb-foot .tkb-foot-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tkb-foot .tkb-foot-links {
		grid-template-columns: repeat(2, 1fr);
		gap: 26px 22px;
	}
}

/* --------------------------------------------------------------------------
   Trust badge card: drop the dark bar behind it

   .tkb-trust::before paints a 56px band of --ink across the top of the
   section so the card could straddle the dark assurance strip above it. That
   strip is gone (client review 09 Sep), so the band was left sitting behind
   the review logos as a black rectangle with nothing to join onto.
   -------------------------------------------------------------------------- */
.tkb-trust::before {
	content: none;
}

@media (max-width: 640px) {
	.tkb-trust {
		padding-bottom: var(--sec-y-md);
	}
}

/* ==========================================================================
   Desktop dropdowns: open on a deliberate hover, not on a passing cursor

   The panels opened the instant the pointer crossed a parent item, so simply
   moving the mouse down the page through "Services" flashed the mega menu
   open. A short delay before opening ignores a cursor on its way somewhere
   else, while closing stays immediate. The panel also sits 10px below the
   link; that gap is now bridged so travelling from the item into the panel
   does not drop the hover halfway.
   ========================================================================== */
@media (min-width: 881px) {
	.tkb-menu > li > .sub-menu {
		transition:
			opacity .18s ease,
			transform .18s ease,
			visibility .18s ease;
		transition-delay: 0s;
	}

	.tkb-menu > li:hover > .sub-menu,
	.tkb-menu > li:focus-within > .sub-menu {
		transition-delay: .22s;
	}

	/* invisible bridge across the gap between the item and its panel */
	.tkb-menu > li.menu-item-has-children::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 12px;
		pointer-events: none;
	}

	.tkb-menu > li.menu-item-has-children:hover::after {
		pointer-events: auto;
	}
}

/* --------------------------------------------------------------------------
   Review badges lift up over the foot of the banner

   With the dark bar gone the card had dropped clear of the hero and sat in
   the pale band on its own. Pull it back up so it straddles the bottom edge
   of the banner, which is where it was drawn to sit.
   -------------------------------------------------------------------------- */
.tkb-trust {
	/* flow-root, or the card's negative margin collapses out through the
	   section and drags the whole pale band up over the banner instead of
	   lifting just the card onto it. */
	display: flow-root;
	padding-top: 0;
	background: var(--paper-2);
}

.tkb-trust-card {
	margin-top: -72px;
}

@media (max-width: 880px) {
	.tkb-trust-card {
		margin-top: -54px;
	}
}

@media (max-width: 640px) {
	.tkb-trust-card {
		margin-top: -40px;
	}
}

/* --------------------------------------------------------------------------
   Closed dropdowns must not be hoverable

   The panels hide with `visibility:hidden`, but design.css then sets the
   nested lists inside the Service Areas mega menu back to
   `visibility:visible`. Those lists therefore stayed hit-testable while their
   panel was closed, and the panels hang 250px below the header — so moving
   the pointer onto the banner landed on an invisible menu link and sprang the
   mega menu open. Let the nested lists follow their panel, and gate pointer
   events on the panel itself so nothing outside the header can trigger it.
   -------------------------------------------------------------------------- */
@media (min-width: 881px) {
	.tkb-menu > li.mega-menu2 .sub-menu .sub-menu {
		visibility: inherit;
	}

	.tkb-menu .sub-menu {
		pointer-events: none;
	}

	.tkb-menu > li:hover > .sub-menu,
	.tkb-menu > li:focus-within > .sub-menu,
	.tkb-menu > li:hover > .sub-menu .sub-menu,
	.tkb-menu > li:focus-within > .sub-menu .sub-menu {
		pointer-events: auto;
	}
}

/* --------------------------------------------------------------------------
   Blog listing meta: date, category and author all lead somewhere

   The date already went to the month archive; the category was a plain span
   and the author was not shown at all. The pill is now a link to its category
   archive and the author line points at their posts.
   -------------------------------------------------------------------------- */
a.bcard-pill {
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

a.bcard-pill:hover,
a.bcard-pill:focus-visible {
	background: var(--ink);
	color: #fff;
}

.bcard-meta-sep {
	margin: 0 7px;
	color: var(--muted-2);
}

.bcard-author {
	color: inherit;
	text-decoration: none;
	transition: color .18s ease;
}

.bcard-author:hover,
.bcard-author:focus-visible {
	color: var(--blue);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Interior section headings: centre the block, not just the text inside it

   interior.css already sets `.pg-main .sec-head{text-align:center}` and
   centres the h2 and standfirst within it, but .sec-head itself keeps the
   design system's `margin: 0 0 44px` and a 680px cap — so the whole block sat
   against the left of the column and "Who You Will Meet / Our Team" read as
   off-centre. Centre the block too.
   -------------------------------------------------------------------------- */
.pg-main .sec-head {
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   Blog card: let the meta links win over the card-wide link

   `.bcard-title a::after` is a stretched link — an overlay at z-index 4 across
   the whole card, so clicking anywhere opens the post. That is what makes the
   card clickable, but it also swallowed the date, author and category links
   underneath it. Lift those three above the overlay; the rest of the card
   still opens the post.
   -------------------------------------------------------------------------- */
.bcard-pill {
	z-index: 5;
}

.bcard-date a {
	position: relative;
	z-index: 5;
}