/*
 * The demo kit's brand layer. Loaded last on every page (src/data/styles.ts), so it wins over the
 * template's root/local/critical/page CSS without !important. The client's colours are the
 * `:root` tokens below and root.css's --primary/--secondary (set from palette.json): the brand
 * accent (--tbGold; for Sinix the red of their site's buttons, #df0d0a) fills buttons
 * and marks things; text on it is --tbOnAccent (white, 5.0:1). On light grounds text uses the same
 * red as --primary (5.0:1). Ink is the template's near-black #111418; on it the phone and toppers
 * use a light red (--tbPhone #ff5a57, 6.0:1).
 */

:root {
	--tbGold: #df0d0a;
	--tbInk: #111418;
	--tbOnAccent: #fff;
	--tbPhone: #ff5a57;
	--tbPrimaryOnDark: var(--tbPhone);
	/* The CTA band's and footer's ground and its rules: the template's near-black, which suits a black or
	   near-black ink. A coloured ink sets its own (Chapman's navy: #07142c, rules #1c2b47) */
	--tbDark: #111418;
	--tbDarkLine: #2d2f2e;
}

/* The CTA band and footer on --tbDark (root.css hard-codes #111418 and #2d2f2e on them) */
#cta-2293,
#cs-footer-2293 {
	background-color: var(--tbDark);
}
#cta-2293 {
	border-bottom-color: var(--tbDarkLine);
}
#cta-2293 .cs-wrapper {
	border-color: var(--tbDarkLine);
}
#cs-footer-2293 .cs-subscribe-group {
	border-left-color: var(--tbDarkLine);
}
#cs-footer-2293 .cs-bottom:before,
#cs-footer-2293 .cs-ul:before,
#cs-footer-2293 .cs-subscribe-group:before {
	background: var(--tbDarkLine);
}

/* Buttons: the accent with --tbOnAccent text (ink on a gold brand, white on a red one); dark with white text on hover.
   Label centred: the template's space-between pushes a lone label to the left edge whenever
   the button is wider than its text (the header's min-width, the full-width form button). */
.cs-button-solid,
#cs-navigation .cs-button-solid {
	justify-content: center;
	color: var(--tbOnAccent);
	background-color: var(--tbGold);
	box-shadow: 4px 4px 0 0 var(--tbInk);
}
.cs-button-solid .cs-icon path {
	fill: currentColor;
}
.cs-button-solid:hover,
#cs-navigation .cs-button-solid:hover {
	color: #fff;
	background-color: var(--tbInk);
	box-shadow: 4px 4px 0 0 var(--tbGold);
}
/* On the dark CTA band the hover ink would vanish into the ground: keep the gold, darken the shadow */
#cta-2293 .cs-button-solid:hover {
	color: var(--tbInk);
	background-color: #fff;
}

/* Phone number: gold on dark backgrounds (hero, CTA band, footer) */
.tb-phone {
	font-weight: 700;
	text-decoration: none;
	color: var(--tbPhone);
}
#cta-2293 .cs-link.tb-phone {
	font-weight: 700;
	color: var(--tbPhone);
}
#cta-2293 .cs-text .tb-phone {
	font-size: inherit;
	white-space: nowrap;
}
#cta-2293 .cs-topper,
#hero-2349 .cs-topper {
	color: var(--tbPrimaryOnDark);
}

/* Home H1 = topper (home.ts hero.topper: "trade · town") + title as two spans, laid out as the template's two
   separate elements were: a flex column with .cs-content's row gap, body font for the topper,
   the template's heading face for the title. */
#hero-2349 .tb-hero-h1 {
	display: flex;
	flex-direction: column;
	row-gap: inherit;
	margin: 0;
	font-family: inherit;
	text-transform: none;
}
#hero-2349 .tb-hero-h1 .cs-title {
	font-family: "Boldonse", "Arial", sans-serif;
	font-size: clamp(2rem, 5.2vw, 4.25rem);
	line-height: 1.35em;
	text-transform: uppercase;
}
/* Overpass draws its middle dot right of centre; -0.1em evens the gaps either side */
#hero-2349 .tb-dot {
	position: relative;
	left: -0.1em;
}
#hero-2349 .cs-text {
	margin-bottom: 0.75rem;
}
/* The hero photo's subject kept in view, darkened a touch more. The default position suits a subject near the middle; a photo whose subject sits elsewhere sets home.ts hero.image.position (inline, wins over this) */
#hero-2349 .cs-background img {
	object-position: 55% 40%;
}
#hero-2349 .cs-background:before {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 45%, #000 100%);
}
/* Optional hero clip (home.ts hero.video): over the photo, which stays the poster and the LCP; the
   shade takes over the photo's gradient so it covers the clip too. Fades in once playing. */
#hero-2349 .tb-hero-video,
#hero-2349 .tb-hero-shade {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}
#hero-2349 .tb-hero-video {
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.8s;
}
#hero-2349 .tb-hero-video.tb-playing {
	opacity: 1;
}
#hero-2349 .tb-hero-shade {
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 45%, #000 100%);
}
#hero-2349.tb-has-video .cs-background:before {
	display: none;
}
.tb-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2.5rem;
}
.tb-hero-phone {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
.tb-hero-phone-label {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--bodyTextColorWhite);
}
.tb-hero-phone .tb-phone {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 900;
	line-height: 1.2em;
}
#hero-2349 .cs-number {
	font-size: clamp(1.25rem, 3.2vw, 2rem);
	line-height: 1.4em;
	color: var(--primary);
}
#hero-2349 .cs-desc {
	font-weight: 700;
	color: var(--headerColor);
}
/* Hero stats side by side (2026-10-01): number over a one-line caption, three across in a short
   white box. Tablets: a white band under the photo, the text above it full width. Desktop: the box in the
   bottom-right corner of a one-screen hero (below). The template stacked them in a tall panel over the photo's
   right half, and one long caption once widened it over the headline. */
@media only screen and (min-width: 48rem) {
	#hero-2349 .cs-stats {
		padding: 1.25rem clamp(1.25rem, 2vw, 2rem);
		grid-template-columns: repeat(3, auto);
		justify-content: start;
		column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
		row-gap: 0;
	}
	#hero-2349 .cs-item {
		grid-column: auto;
	}
	#hero-2349 .cs-number {
		font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	}
}
@media only screen and (min-width: 48rem) and (max-width: 63.9375rem) {
	#hero-2349 {
		padding-bottom: 0;
		gap: 0;
	}
	#hero-2349 .cs-content {
		width: 100%;
		max-width: 44rem;
		padding-bottom: 2.5rem;
	}
	#hero-2349 .cs-stats {
		margin: 0 -1rem;
		padding-left: 1rem;
		padding-right: 1rem;
		position: relative;
	}
}
/* Hero stats on phones: one row per phrase */
@media only screen and (max-width: 47.9375rem) {
	#hero-2349 .cs-stats {
		row-gap: 0.75rem;
	}
	#hero-2349 .cs-item {
		grid-column: span 12;
		flex-direction: row;
		align-items: baseline;
		gap: 0.625rem;
	}
	#hero-2349 .cs-number {
		font-size: 1.375rem;
	}
}

/* Home service cards: Material icons at 56-64 px, not the template's 24 px */
#services-2349 .cs-icon {
	width: clamp(3.5rem, 5vw, 4rem);
	height: auto;
}
/* Service page trust cards: 40 px, not 32 (Material icons carry 2 px of padding) */
#content-page-1399 .cs-h3-icon {
	width: 2.5rem;
	flex: none;
}

/* Header: their logo is a stacked lockup (1.28:1), so it sits taller than a wide one; mobile "Call Now" dials */
#cs-navigation .tb-nav-call {
	display: none;
}
#cs-navigation .cs-logo {
	height: 3.75rem;
}
#cs-navigation .cs-logo img {
	width: auto;
	height: 100%;
	object-fit: contain;
}
/* A touch smaller on phones so the Call Now button never runs into it */
@media only screen and (max-width: 1023px) {
	#cs-navigation .cs-logo {
		height: 3.5rem;
	}
}
@media only screen and (max-width: 399px) {
	#cs-navigation .cs-logo {
		height: 3.25rem;
	}
}
/* A two-line banner title (a long service name on a phone) stays left like the one-line ones */
#banner-558 .cs-int-title {
	text-align: left;
}
@media only screen and (max-width: 1023px) {
	#cs-navigation .cs-button-solid.tb-nav-call {
		font-size: 0.875rem;
		line-height: 2.5rem;
		min-width: 0;
		margin: 0 1rem 0 0;
		padding: 0 1rem;
		display: inline-flex;
		order: 2;
		/* a wide logo lockup squeezed "Call Now" onto two lines at 390 px (1761 Renovations) */
		white-space: nowrap;
	}
	#cs-navigation .cs-nav {
		order: 3;
	}
}
@media only screen and (max-width: 359px) {
	#cs-navigation .cs-logo {
		height: 3rem;
	}
	#cs-navigation .cs-button-solid.tb-nav-call {
		padding: 0 0.625rem;
		margin-right: 0.625rem;
	}
}
@media only screen and (min-width: 64rem) {
	#cs-navigation .cs-logo {
		height: 5.25rem;
		padding: 0.25rem 0;
	}
}
/* Seven menu items (Mūsų darbai, Atsiliepimai added 2026-10-15): from 1024 to 1279 px a smaller logo, tighter
   gaps and a one-line button, or "Kontaktai" ran under the button and the button broke onto two lines */
@media only screen and (min-width: 64rem) {
	#cs-navigation .cs-nav-button {
		white-space: nowrap;
	}
}
@media only screen and (min-width: 64rem) and (max-width: 79.99rem) {
	#cs-navigation .cs-logo {
		height: 4.25rem;
	}
	#cs-navigation .cs-ul {
		gap: clamp(1rem, calc(2.6vw - 0.6rem), 2.375rem);
	}
	#cs-navigation .cs-nav-button {
		min-width: 0;
		margin-left: 1rem;
		padding: 0 1.25rem;
	}
}

/* About block: their own line as a pull quote, a second job photo inset in the corner of the big frame */
#sbs-2348 .tb-quote {
	margin: 1.5rem 0;
	padding: 0 0 0 1.25rem;
	border-left: 4px solid var(--tbGold);
}
#sbs-2348 .tb-quote .cs-text {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
	color: var(--headerColor);
}
#sbs-2348 .cs-content > .cs-text + .cs-text {
	margin-top: 1rem;
}
#sbs-2348 .tb-inset {
	width: 46%;
	max-width: 20rem;
	aspect-ratio: 4 / 3;
	border: 0.375rem solid #fff;
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.25);
	display: block;
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
}
/* The big photo's curtain, seam and notches (motion.css, data-motion-curtain) in the container's colour */
#sbs-2348 .cs-picture {
	--motion-ground: #F1EEEC;
}
#sbs-2348 .tb-inset {
	--motion-drift: 10%;
}
@media only screen and (min-width: 48rem) {
	#sbs-2348 .tb-inset {
		right: -2rem;
		bottom: 2rem;
	}
}

/* Reviews: rating badge, initial avatars, gold stars */
#reviews-2354 .tb-rating {
	font-size: 1rem;
	line-height: 1.5em;
	text-decoration: none;
	margin-top: 1.25rem;
	padding: 0.5rem 1.25rem;
	background-color: #fff;
	color: var(--headerColor);
	border: 1px solid #e8e8e8;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: border-color 0.3s;
}
#reviews-2354 .tb-rating:hover {
	border-color: var(--primary);
}
/* A second source (Facebook recommendations: a count, no stars) sits beside the rating badge */
#reviews-2354 .tb-rating-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: inherit;
	gap: 0 0.75rem;
}
#reviews-2354 .tb-rating-stars,
#reviews-2354 .tb-stars {
	letter-spacing: 0.05em;
	color: var(--primary);
}
#reviews-2354 .tb-initial {
	font-size: 1.375rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tbOnAccent);
	background-color: var(--tbGold);
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Service pages: links in the article and FAQ */
#content-page-1399 li a,
#content-page-1399 p a:not(.cs-button-solid),
#faq-2294 .cs-item-p a {
	font-size: inherit;
	line-height: inherit;
	text-decoration: underline;
	color: var(--primary);
}

/* Phones: the form first, the map under it (from 600px they sit side by side). Set on the wrapper,
   not the iframe, so a lazy-loaded map or its <noscript> copy goes under the form too. */
@media only screen and (max-width: 599px) {
	#contact-2251 .cs-wrapper {
		order: -1;
	}
}

/* Contact page: call / email / hours / address above the form */
#contact-2251 .tb-contact-list {
	width: 100%;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.25rem 1.5rem;
}
#contact-2251 .tb-contact-list li {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
}
#contact-2251 .tb-contact-label {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.5em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--primary);
}
#contact-2251 .tb-contact-value {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4em;
	text-decoration: none;
	color: var(--headerColor);
	overflow-wrap: anywhere;
}
#contact-2251 a.tb-contact-value:hover {
	color: var(--primary);
}
#contact-2251 .tb-contact-note {
	font-size: 0.875rem;
	line-height: 1.5em;
	color: var(--bodyTextColor);
}
#contact-2251 .tb-form-note {
	font-size: 0.875rem;
	line-height: 1.5em;
	margin: -0.5rem 0 0.5rem;
	color: #585b5d;
	grid-column: span 12;
}
/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
#contact-2251 .tb-honeypot {
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
	left: -10000px;
}
#contact-2251 .cf-turnstile {
	min-height: 65px;
	grid-column: span 12;
}
#contact-2251 .cs-submit:disabled {
	opacity: 0.7;
	cursor: wait;
}
#contact-2251 .tb-form-status {
	font-size: 1rem;
	line-height: 1.5em;
	margin: 0.5rem 0 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid currentColor;
	background-color: #fff;
	grid-column: span 12;
}
#contact-2251 .tb-form-status.is-success {
	color: #1d6b34;
}
#contact-2251 .tb-form-status.is-error {
	color: #b01f18;
}

/* Footer: "Call for a Free Estimate" column in place of the template's newsletter box */
#cs-footer-2293 .tb-footer-contact .tb-phone {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 900;
	line-height: 1.2em;
}
#cs-footer-2293 .cs-logo-img {
	width: 100%;
	max-width: 10rem;
	height: auto;
}

/* Banner: dark ground like their logo, gold topper, white title, white current crumb */
#banner-558 {
	background-color: var(--tbInk);
}
#banner-558 .cs-int-topper {
	color: var(--tbPrimaryOnDark);
}
#banner-558 .cs-link {
	color: #d9d9d9;
}
#banner-558 .cs-link.cs-active {
	font-weight: 700;
	color: #fff;
}

/* Square design: sharp corners on photos and boxes the template rounded */
#gallery-1152 .cs-image,
#content-page-1399 .cs-background,
#content-page-1399 .cs-box,
#content-page-1399 .cs-item {
	border-radius: 0;
}

/* /gallery/: every job photo in an even grid, a click opens it full size (Gallery.astro) */
#gallery-1152.tb-all .cs-content .cs-text {
	margin-top: 1rem;
}
#gallery-1152.tb-all .cs-gallery {
	max-width: 100%;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	grid-template-rows: none;
	grid-auto-rows: auto;
}
#gallery-1152.tb-all .cs-image,
#gallery-1152.tb-all .cs-image:nth-of-type(4),
#gallery-1152.tb-all .cs-image:nth-of-type(5) {
	min-height: 0;
	aspect-ratio: 4 / 3;
	grid-column: auto;
	cursor: zoom-in;
}
#gallery-1152.tb-all .cs-image img {
	transition: transform 0.4s;
}
#gallery-1152.tb-all .cs-image:hover img,
#gallery-1152.tb-all .cs-image:focus-visible img {
	transform: scale(1.04);
}
#gallery-1152 .tb-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100svh;
	max-height: 100svh;
	margin: 0;
	padding: 3.5rem 1rem 4.5rem;
	box-sizing: border-box;
	border: 0;
	background: rgba(10, 10, 10, 0.94);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
}
#gallery-1152 .tb-lightbox[open] {
	display: flex;
}
#gallery-1152 .tb-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.6);
}
#gallery-1152 .tb-lightbox-img {
	max-width: 100%;
	max-height: calc(100svh - 9rem);
	object-fit: contain;
}
#gallery-1152 .tb-lightbox-caption {
	font-size: 0.9375rem;
	line-height: 1.4em;
	text-align: center;
	margin: 0;
	color: #e8e8e8;
}
#gallery-1152 .tb-lightbox-btn {
	font-size: 2rem;
	line-height: 1;
	width: 3rem;
	height: 3rem;
	border: 0;
	color: var(--tbOnAccent);
	background: var(--tbGold);
	cursor: pointer;
	position: absolute;
}
#gallery-1152 .tb-lightbox-close {
	top: 0.5rem;
	right: 0.5rem;
}
#gallery-1152 .tb-lightbox-prev,
#gallery-1152 .tb-lightbox-next {
	bottom: 0.75rem;
}
#gallery-1152 .tb-lightbox-prev {
	left: calc(50% - 3.5rem);
}
#gallery-1152 .tb-lightbox-next {
	right: calc(50% - 3.5rem);
}
@media only screen and (min-width: 64rem) {
	#gallery-1152 .tb-lightbox-prev,
	#gallery-1152 .tb-lightbox-next {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}
	#gallery-1152 .tb-lightbox-prev {
		left: 1rem;
	}
	#gallery-1152 .tb-lightbox-next {
		right: 1rem;
	}
}

/* Hero text block anchored at the bottom: it ends on a line (the ::before's height) just above the
   first screen's fold, or where the template's photo height put it if that is higher, and a longer
   title or text grows it upwards into the photo instead of pushing the button off the screen (a
   three-line H1 once had to be cut to pass fold-check). The line = the template's photo height
   above + a ~26.5rem text block; margin-top keeps at least 13rem of photo under the header.
   The screen height is the one at load (--tb-vh, BaseLayout), never above 100svh: in-app browsers
   (Messenger, Instagram) resize the page as their toolbar hides, 100svh follows, and the whole hero
   jumped by the toolbar's height every time a finger changed direction. */
#hero-2349 .cs-container {
	display: grid;
	padding-top: 0;
}
#hero-2349 .cs-container::before {
	content: "";
	grid-area: 1 / 1;
	height: min(calc(clamp(350px, 58vw, 600px) + 26.5rem), calc(min(100svh, var(--tb-vh, 100svh)) - 1.25rem));
}
#hero-2349 .cs-content {
	grid-area: 1 / 1;
	align-self: end;
	margin-top: 13rem;
}

/* Hero text on the same 80rem line as the header's logo (the template let it run to the viewport edge) */
@media only screen and (min-width: 64rem) {
	/* The template's 600 px of photo above the headline put the button below a 768/900 px laptop
	   screen: the text block now ends inside the first screen (capped for tall screens), photo above it */
	#hero-2349 .cs-container {
		max-width: 80rem;
		padding-left: 1rem;
		padding-right: 1rem;
		box-sizing: border-box;
	}
	/* One screen tall, as on 912 Garage Doors: the text block ends --tbHeroPad above the fold and the section's
	   bottom padding is that same --tbHeroPad, so the stats box in its bottom-right corner ends on the fold.
	   7.5rem clears the box (95-105 px tall), which at 1024-1200 px reaches under the hero phone number. */
	#hero-2349 {
		--tbHeroPad: clamp(7.5rem, calc(min(100svh, var(--tb-vh, 100svh)) * 0.13), 9rem);
		padding-bottom: var(--tbHeroPad);
	}
	#hero-2349 .cs-container::before {
		height: clamp(37.75rem, calc(min(100svh, var(--tb-vh, 100svh)) - var(--tbHeroPad)), 62.25rem);
	}
	#hero-2349 .cs-content {
		width: 52%;
	}
	/* Two lines, "ŠVARA, KURIA / GALITE PASITIKĖTI!", at 912's size: the template's 68 px made the hero a poster */
	#hero-2349 .tb-hero-h1 .cs-title {
		font-size: clamp(2.25rem, min(4.2vw, calc(min(100svh, var(--tb-vh, 100svh)) * 0.07)), 3.375rem);
	}
}

/* About page: every Google review in a grid, no photo (Reviews.astro `all`) */
#reviews-2354.tb-all .cs-container {
	max-width: 80rem;
}
#reviews-2354.tb-all .cs-card-group {
	padding: 0;
}
#reviews-2354.tb-all .cs-item,
#reviews-2354.tb-all .cs-item:last-of-type {
	width: auto;
	max-width: none;
	height: auto;
	padding: clamp(2rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem);
	order: 0;
	position: relative;
	left: auto;
	transform: none;
	z-index: 1;
	display: flex;
	flex-direction: column;
}
#reviews-2354.tb-all .cs-featured {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}
#reviews-2354.tb-all .cs-item-text {
	font-size: 1rem;
	margin-bottom: 2rem;
}
#reviews-2354.tb-all .cs-info {
	margin-top: auto;
}
@media only screen and (min-width: 64rem) {
	#reviews-2354.tb-all .cs-item {
		grid-column: span 4;
	}
}

/* About page: their three "why us" cards */
#sbs-2348 .tb-why {
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
#sbs-2348 .tb-why li {
	font-size: var(--bodyFontSize);
	line-height: 1.5em;
	list-style: none;
	padding-left: 1.25rem;
	color: var(--bodyTextColor);
	position: relative;
}
#sbs-2348 .tb-why li:before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	background: var(--tbGold);
	position: absolute;
	left: 0;
	top: 0.5em;
}
#sbs-2348 .tb-why strong {
	color: var(--headerColor);
}

/* Service pages: a line from one of their Google reviews */
#content-page-1399 .tb-review-quote {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	background-color: #f7f7f7;
	border-left: 4px solid var(--tbGold);
}
#content-page-1399 .tb-review-quote p {
	font-size: 1.0625rem;
	font-style: italic;
	margin: 0 0 0.5rem;
	color: var(--headerColor);
}
#content-page-1399 .tb-review-quote cite {
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	color: var(--primary);
}

/* Service pages: the template brightens article links 120%, which turns the darker gold back into a
   light one that fails contrast on white */
#content-page-1399 p a,
#content-page-1399 li a {
	filter: none;
}

/* /gallery/ on phones: two photos a row, not one (45 photos in one column is a very long scroll) */
@media only screen and (max-width: 37.5rem) {
	#gallery-1152.tb-all .cs-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}
}

/* Service page photo badge: logo gold with dark ink, like their van decal (the icon is drawn dark
   by scripts/make-icons.mjs) */
#content-page-1399 .cs-box {
	background-color: var(--tbGold);
}
#content-page-1399 .cs-box .cs-desc {
	color: var(--tbOnAccent);
}

/* Home service photo cards: five services sit in one row of five on desktop, not four plus an orphan
   (tablet keeps the template's centred 3 + 2) */
@media only screen and (min-width: 64rem) {
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(5):last-child) {
		grid-template-columns: repeat(5, 1fr);
	}
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(5):last-child) .cs-item {
		grid-column: span 1;
	}
}

/* Three services: one row of three on desktop, not four columns with the right quarter empty
   (Fanta K's Cleaning) */
@media only screen and (min-width: 64rem) {
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(3):last-child) .cs-item {
		grid-column: span 4;
	}
}

/* Six services: two rows of three on desktop, not four plus an orphan pair; nine: three rows of three,
   not two rows of four plus one card alone (Chapman's, 2026-10-01) */
@media only screen and (min-width: 64rem) {
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(6):last-child) .cs-item,
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(9):last-child) .cs-item {
		grid-column: span 4;
	}
}
/* Seven cards (Sinix): rows of four with the last three centred. A 24-column grid gives the same card
   width (six columns and five gaps = three and two) and can start the fifth card half a card in. On a
   600-767 px tablet (two a row) the seventh card sits centred under the others. */
@media only screen and (min-width: 64rem) {
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(7):last-child) {
		grid-template-columns: repeat(24, 1fr);
	}
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(7):last-child) .cs-item {
		grid-column: span 6;
	}
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(7):last-child) .cs-item:nth-child(5) {
		grid-column: 4 / span 6;
	}
}
@media only screen and (min-width: 600px) and (max-width: 47.9375rem) {
	#services-2355 .cs-card-group .cs-item:nth-child(7):last-child {
		grid-column: 4 / span 6;
	}
}

/* Service-page article button: services.css hard-codes the template's #f7ba0c on this id selector,
   which outranks the brand rule above (it only matched while the brand was gold) */
#content-page-1399 .cs-button-solid {
	color: var(--tbOnAccent);
	background-color: var(--tbGold);
	box-shadow: 4px 4px 0 0 var(--tbInk);
}
#content-page-1399 .cs-button-solid:hover {
	color: #fff;
	background-color: var(--tbInk);
	box-shadow: 4px 4px 0 0 var(--tbGold);
}

/* FAQ: the template widens its container to 90rem at 1300px+, flush with the viewport edge while
   every other section sits in 80rem; and its cream grounds were tinted for a gold brand */
#faq-2294 {
	background-color: #f7f4ef;
}
#faq-2294 .cs-faq-item {
	background-color: #fff;
}
#faq-2294 .cs-faq-item.active,
#faq-2294 .cs-faq-item.active .cs-button {
	background-color: #fdf0ea;
}
@media only screen and (min-width: 81.25rem) {
	#faq-2294 .cs-container {
		max-width: 80rem;
	}
}

/* Home service photo cards: the template's 1.2em is too tight for Boldonse, so a title that wraps
   ("LOCAL & RESIDENTIAL / MOVES") runs its two lines into each other; 1.5em like the template's .cs-title */
#services-2355 .cs-h3 {
	line-height: 1.5em;
}

/* A wide logo (width/height >= 4, set by Header/Footer as data-shape="wide"): sized by width on
   phones so the Call Now button keeps its room, a little taller on desktop (Marks Electric, 6.2:1) */
@media only screen and (max-width: 1023px) {
	#cs-navigation .cs-logo[data-shape="wide"] {
		height: auto;
		width: calc(100vw - 12.5rem);
		max-width: 17rem;
	}
	#cs-navigation .cs-logo[data-shape="wide"] img {
		width: 100%;
		height: auto;
	}
}
@media only screen and (min-width: 64rem) {
	#cs-navigation .cs-logo[data-shape="wide"] {
		height: 4rem;
		padding: 0.5rem 0;
	}
}
#cs-footer-2293 .cs-logo-img[data-shape="wide"] {
	max-width: 17rem;
}

/* About block: who said the pull quote (a Google review). */
.tb-quote-by {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-style: normal;
	opacity: 0.8;
}

/* Lithuanian headings in Boldonse. Its capitals are 1.19em tall; the marks reach 1.55em above the baseline
   (Ė Š Ž Č Ū) and 0.35em below it (Į Ų Ą Ę), and its content area is 1.92em. At the template's 1.2em a
   wrapped title ran its lines into each other and its first line's marks into the topper ("SUSISIEKITE" over
   a wrapped Lithuanian title, LT kit 2026-09-29, measured with toolkit text-collide.mjs). 1.6em clears a dotted
   capital under a plain line (the template's own .cs-title is 1.5em); at 1.6em the first line's marks stand
   0.19em above the box, so 0.24em of padding keeps them off whatever sits above. Id selectors: the template's
   own rules are #section .class. */
.cs-title,
.cs-int-title,
#banner-558 .cs-int-title,
#hero-2349 .tb-hero-h1 .cs-title,
#services-2349 .cs-h2,
#services-2355 .cs-h3,
#content-page-1399 .cs-h3 {
	line-height: 1.7em;
}
.cs-title,
#banner-558 .cs-int-title,
#hero-2349 .tb-hero-h1 .cs-title {
	padding-top: 0.24em;
}
/* The small card headings (20-25 px) get 1.8em: at 1.7em an ogonek sat 3-4 px over the next line's capital and
   read as its accent (an Į over the next line's capital O read as Ó); at 49 px the same gap reads fine. */
#services-2349 .cs-h2,
#services-2355 .cs-h3,
#content-page-1399 .cs-h3 {
	line-height: 1.8em;
}
/* Lithuanian words run longer than the kit's English ones (LT kit 2026-09-29, overflow-check.mjs): four home
   cards at 1024-1279 left "PERMONTAVIMAS" 13 px wider than its card, and at 320 px "ELEKTROMOBILIŲ", a long
   breadcrumb, the hero captions and the header's call button ran past their boxes. */
@media only screen and (min-width: 64rem) and (max-width: 79.9375rem) {
	#services-2349 .cs-h2 {
		font-size: 1.25rem;
	}
}
@media only screen and (max-width: 47.9375rem) {
	/* one stat per row here, yet the grid kept 12 columns and the template's column gap: 11 gaps = 330 px */
	#hero-2349 .cs-stats {
		column-gap: 0;
	}
	#hero-2349 .cs-item {
		flex-wrap: wrap;
	}
	#hero-2349 .cs-desc {
		min-width: 0;
	}
}
@media only screen and (max-width: 359px) {
	.cs-title,
	#content-page-1399 .cs-title {
		font-size: 1.625rem;
	}
	#banner-558 .cs-breadcrumbs {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}
	#cs-navigation .cs-button-solid.tb-nav-call {
		flex: none;
	}
}

/* Service-page article headings. At the template's fixed 2rem the H2s outweighed the page's H1 on phones (H1 31 px,
   H2 32 px: Sinix read as two H1s, 2026-10-04), and Boldonse capitals stand ~1.3em tall, so long Lithuanian H2s ran
   to 4 lines on phones and in the narrow 1024 px column ("Nuo ko priklauso periodinio valymo kaina"). Now 20 px up to
   ~1024 px, 28 px at 1440, line-height 1.7em (the H1's; the font's own "normal" is ~2em): 89 Sinix H2s at most
   3 lines at 360 px (most 2), at most 2 from 1024 px. H3 one step below. */
#content-page-1399 .cs-content h2 {
	font-size: clamp(1.25rem, 1.95vw, 1.75rem);
	line-height: 1.7em;
}
#content-page-1399 .cs-content h3 {
	font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
	line-height: 1.7em;
}

/* Interior banner title with one long word (Banner.astro sets --fit-chars from 12 letters up): Boldonse capitals
   are ~0.68em wide, so "SPECIALIZUOTI" at the template's 39 px minimum ran 39 px past a 320 px phone. The size
   drops only below the width where the word fits (~387 px for 13 letters); shorter titles never get the variable. */
#banner-558 .cs-int-title[style*="--fit-chars"] {
	font-size: min(clamp(2.4375rem, 6.4vw, 3.5125rem), calc((100vw - 2rem) / (var(--fit-chars) * 0.7)));
}

/* CTA band title with one long word (CtaBand.astro sets --fit-chars from 12 letters up): on desktop the title column
   is 26.875rem wide, and "PROFESIONALIOS" at the template's 49 px ran 100 px under the phone card at 1280 px.
   Boldonse capitals are ~0.76em wide; the size drops only where the word would not fit. */
@media only screen and (min-width: 64rem) {
	#cta-2293 .cs-title[style*="--fit-chars"] {
		font-size: min(var(--headerFontSize), calc(26.875rem / (var(--fit-chars) * 0.76)));
	}
}

/* Mobile menu: the template gave the list 65vh and `overflow: scroll`, so with twelve services open the last ones
   (and Kontaktai) sat below a cut-off with white space under it, and wherever the browser has classic scrollbars an
   empty horizontal one ran along the bottom (MK Electrical's "slider at the bottom", 2026-09-30). Now the panel ends
   at the bottom of the screen: its % height is the logo row's (.cs-container, 88-96 px), and above that row sits the
   53 px top bar (3.3125rem at every width), which slides away once the page scrolls (body.scroll). The list fills the
   panel, scrolls only when it is taller than that (a short phone, or one held sideways), never sideways, and sits
   tighter so all of it shows on a 390 x 844 phone. */
@media only screen and (max-width: 1023px) {
	#cs-navigation .cs-ul-wrapper {
		height: calc(100dvh - 100% - 3.3125rem);
	}
	body.scroll #cs-navigation .cs-ul-wrapper {
		height: calc(100dvh - 100%);
	}
	#cs-navigation .cs-ul {
		height: 100%;
		padding-top: 1.75rem;
		padding-bottom: 1.5rem;
		gap: 1rem;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	#cs-navigation .cs-drop-ul {
		gap: 0.5rem;
	}
	#cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
		margin-top: 0.625rem;
		padding: 1rem 1.25rem;
	}
}

/* Privatumo politika (/privatumo-politika/): one centred column, no photo (912 Garage Doors' privacy page) */
#content-page-1399.tb-legal .cs-container {
	justify-content: center;
}
#content-page-1399.tb-legal .cs-content {
	width: 100%;
	max-width: 50rem;
}
#content-page-1399.tb-legal h2 {
	font-size: 1.5rem;
}
#content-page-1399.tb-legal a,
#contact-2251 .tb-form-note a {
	font-size: inherit;
	color: var(--primary);
}
#cs-footer-2293 .tb-privacy-link {
	font-size: 1rem;
}

/* Phone numbers inside running text (the {phone} token): one unbroken number, in the brand red. Plain-text numbers
   showed iPhone Safari's own blue link colour (footer, /kontaktai/, 2026-10-04); on the footer's dark ground the
   link is .tb-phone, the same red as the big number above it. */
a[href^="tel:"] {
	white-space: nowrap;
}
#cs-footer-2293 .cs-text .tb-phone {
	font-size: inherit;
}
#contact-2251 .cs-text a[href^="tel:"] {
	font-weight: 700;
	text-decoration: none;
	color: var(--primary);
}
/* Anything iPhone Safari still turns into a link of its own keeps the text's look */
a[x-apple-data-detectors] {
	color: inherit !important;
	font: inherit !important;
	text-decoration: none !important;
}