/*
Theme Name:   Tuma Plumbing
Theme URI:    https://tumaplumbing.com
Description:  Lean hand-built theme for Tuma Plumbing. Red, white and blue.
Author:       Distinctly Developed
Author URI:   https://distinctlydeveloped.com
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  tuma
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--blue:        #0B2A5B;
	--blue-surf:   #143A72;
	--blue-line:   #23508F;
	--blue-border: #2B569B;

	--red:         #BF0A30;
	--red-press:   #97071F;

	--white:       #FFFFFF;
	--page:        #F4F7FB;
	--sky:         #E3EDF8;
	--hair:        #D5DFEC;
	--field:       #C2D2E6;

	--ink:         #1F2B3D;
	--muted:       #55677E;
	--on-dark:     #B3C9E4;
	--faint:       #8FADD4;

	--display: "Big Shoulders Display", "Big Shoulders", "Oswald", "Arial Narrow", sans-serif;
	--body:    "Barlow", system-ui, "Helvetica Neue", sans-serif;

	--radius: 2px;
	--gutter: 80px;
	--measure: 1280px;
	--utility-h: 40px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
	margin: 0;
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--page);
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.005em;
	color: var(--blue);
	margin: 0 0 20px;
	text-wrap: balance;
}
h1 { font-size: clamp(46px, 6.4vw, 92px); line-height: 0.92; }
h2 { font-size: clamp(38px, 4.6vw, 66px); }
h3 { font-size: clamp(26px, 2.2vw, 31px); font-weight: 700; line-height: 1.05; }
h4 { font-size: 21px; font-weight: 700; line-height: 1.15; }

p { margin: 0 0 20px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--red); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--red-press); }

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

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

.tuma-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	padding: 14px 22px; background: var(--red); color: var(--white);
	font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tuma-skip:focus { left: 0; color: var(--white); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.tuma-wrap { max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); }

.tuma-section { padding-block: 100px; }
.tuma-section--tight { padding-block: 72px; }

.tuma-band--blue { background: var(--blue); }
.tuma-band--sky  { background: var(--sky); }
.tuma-band--red  { background: var(--red); }
.tuma-band--blue h1, .tuma-band--blue h2, .tuma-band--blue h3,
.tuma-band--red  h1, .tuma-band--red  h2, .tuma-band--red  h3 { color: var(--white); }
.tuma-band--blue p { color: var(--on-dark); }
.tuma-band--red  p { color: #FADCE1; }

.tuma-grid { display: grid; gap: 24px; }
.tuma-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tuma-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tuma-eyebrow {
	display: flex; align-items: center; gap: 12px;
	font-size: 13px; font-weight: 700; letter-spacing: .22em;
	text-transform: uppercase; color: var(--red);
	margin: 0 0 18px;
}
.tuma-eyebrow::before { content: ""; width: 28px; height: 3px; background: currentColor; flex-shrink: 0; }

.tuma-lede { font-size: 19px; line-height: 1.65; color: var(--muted); }

/* Texas watermark, dropped into any positioned band */
.tuma-texas {
	position: absolute; pointer-events: none;
	opacity: .06; color: var(--white);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.tuma-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 11px;
	height: 62px; padding-inline: 32px;
	font-family: var(--body); font-size: 17px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
	border: 0; border-radius: var(--radius); cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tuma-btn--sm { height: 50px; padding-inline: 26px; font-size: 14px; letter-spacing: .08em; }

.tuma-btn--primary { background: var(--red); color: var(--white); }
.tuma-btn--primary:hover { background: var(--red-press); color: var(--white); }

.tuma-btn--ghost {
	background: transparent; color: var(--blue);
	border: 2px solid var(--blue);
}
.tuma-btn--ghost:hover { background: var(--blue); color: var(--white); }

.tuma-btn--ondark {
	background: transparent; color: var(--white);
	border: 2px solid var(--blue-border);
}
.tuma-btn--ondark:hover { background: var(--white); color: var(--blue); }

.tuma-btn--onred { background: var(--blue); color: var(--white); }
.tuma-btn--onred:hover { background: #061B3C; color: var(--white); }

.tuma-textlink {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 700; letter-spacing: .10em;
	text-transform: uppercase; color: var(--red);
}

/* ==========================================================================
   Utility bar
   ========================================================================== */

.tuma-utility {
	background: var(--blue); color: var(--faint);
	font-size: 12px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase;
}
.tuma-utility__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	max-width: var(--measure); margin: 0 auto;
	min-height: var(--utility-h); padding-inline: var(--gutter);
}
.tuma-utility__item { display: flex; align-items: center; gap: 10px; }
.tuma-utility__item .tuma-icon--star { color: var(--red); flex-shrink: 0; }

/* ==========================================================================
   Masthead
   ========================================================================== */

.tuma-masthead { background: var(--page); border-bottom: 1px solid var(--hair); }
.tuma-masthead__inner {
	display: flex; align-items: center; gap: 40px;
	max-width: var(--measure); margin: 0 auto;
	min-height: 92px; padding-inline: var(--gutter);
}

.tuma-brand { display: flex; align-items: center; gap: 14px; color: inherit; }
.tuma-brand__mark {
	display: grid; place-items: center;
	width: 46px; height: 46px; flex-shrink: 0;
	background: var(--blue); color: var(--white); border-radius: var(--radius);
}
.tuma-brand__mark--red { background: var(--red); width: 42px; height: 42px; }
.tuma-brand__words { display: flex; flex-direction: column; gap: 2px; }
.tuma-brand__name {
	font-family: var(--display); font-size: 30px; font-weight: 800;
	line-height: 1; color: var(--blue); text-transform: uppercase;
}
.tuma-brand__tag {
	font-size: 10px; font-weight: 700; letter-spacing: .20em;
	text-transform: uppercase; color: var(--muted);
}

.tuma-nav { margin-inline: auto; }
.tuma-nav__list {
	display: flex; align-items: center; gap: 34px;
	margin: 0; padding: 0; list-style: none;
}
.tuma-nav__list a {
	font-size: 15px; font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; color: var(--ink);
	padding-block: 6px;
}
.tuma-nav__list a:hover { color: var(--red); }
.tuma-nav__list .current-menu-item > a,
.tuma-nav__list .current_page_item > a {
	color: var(--red); box-shadow: inset 0 -2px 0 0 var(--red);
}

.tuma-masthead__cta { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.tuma-callout { display: flex; flex-direction: column; gap: 1px; text-align: right; color: var(--blue); }
.tuma-callout__label {
	font-size: 10px; font-weight: 700; letter-spacing: .18em;
	text-transform: uppercase; color: var(--muted);
}
.tuma-callout__number { font-family: var(--display); font-size: 25px; font-weight: 700; line-height: 1; }

.tuma-navtoggle {
	display: none;
	width: 46px; height: 46px;
	align-items: center; justify-content: center;
	margin-left: auto;
	background: transparent; color: var(--blue);
	border: 1.5px solid var(--field); border-radius: var(--radius);
	cursor: pointer;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.tuma-card {
	display: flex; flex-direction: column; gap: 16px;
	padding: 34px 32px 30px;
	background: var(--white); border: 1px solid var(--hair); border-radius: var(--radius);
	color: inherit;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.tuma-card:hover, .tuma-card--hover:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(11,42,91,.10);
	border-color: var(--red);
}
.tuma-card h3 { margin: 0; }
.tuma-card p { color: var(--muted); font-size: 16px; margin: 0; flex-grow: 1; }
.tuma-card__icon { color: var(--red); }

/* Article thumb: oversized icon on a flat flag-coloured field */
.tuma-thumb {
	position: relative; overflow: hidden;
	display: grid; place-items: center;
	aspect-ratio: 16 / 9;
	border-bottom: 1px solid var(--hair);
}
.tuma-thumb--blue { background: var(--blue); color: var(--white); }
.tuma-thumb--red  { background: var(--red);  color: var(--white); }
.tuma-thumb--sky  { background: var(--sky);  color: var(--blue); }
.tuma-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tuma-thumb__icon { position: relative; width: 62px; height: 62px; }

.tuma-kicker {
	font-size: 12px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--red);
}

/* ==========================================================================
   Forms — Divi is gone, so these are the real controls
   ========================================================================== */

label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 9px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="password"], input[type="search"], select, textarea {
	width: 100%;
	font-family: var(--body); font-size: 16px; color: var(--ink);
	background: var(--page); border: 1px solid var(--field); border-radius: var(--radius);
	padding: 15px 16px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input[type="search"]:focus, select:focus, textarea:focus {
	outline: 2px solid var(--red); outline-offset: -2px; border-color: var(--red);
}
::placeholder { color: #9AACC2; opacity: 1; }
textarea { min-height: 160px; resize: vertical; }

/* ==========================================================================
   Sliced Invoices — presentation only.

   IMPORTANT: Sliced Invoices does NOT use the WordPress theme for its
   payment, quote and invoice views. It renders standalone documents with
   its own Bootstrap stylesheet (body class is just "body payment", no
   wp-theme-* class, and this stylesheet is not enqueued there).

   So these rules only apply if Sliced content is ever rendered INSIDE a
   theme template. They are kept for that case and are harmless otherwise.
   To restyle the real invoice/quote views, override its templates from a
   sliced-invoices/ folder in the theme instead.

   The upside: the CRM is insulated from the theme switch.
   ========================================================================== */

.tuma-sliced .tuma-main { padding-block: 60px; }
.sliced-invoice, .sliced-quote { font-family: var(--body); color: var(--ink); }
.sliced-invoice h1, .sliced-quote h1,
.sliced-invoice h2, .sliced-quote h2 { font-family: var(--display); color: var(--blue); }

.sliced-invoice table, .sliced-quote table { width: 100%; border-collapse: collapse; }
.sliced-invoice table th, .sliced-quote table th {
	background: var(--blue); color: var(--white);
	font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	padding: 14px 16px; text-align: left;
}
.sliced-invoice table td, .sliced-quote table td { border-bottom: 1px solid var(--hair); padding: 14px 16px; }

a.sliced-accept-quote, a.sliced-pay-invoice,
.sliced-invoice .button, .sliced-quote .button {
	display: inline-flex; align-items: center; justify-content: center;
	height: 56px; padding-inline: 30px;
	background: var(--red); color: var(--white);
	font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	border: 0; border-radius: var(--radius);
}
a.sliced-accept-quote:hover, a.sliced-pay-invoice:hover,
.sliced-invoice .button:hover, .sliced-quote .button:hover { background: var(--red-press); color: var(--white); }

/* Decline is secondary — it should not compete with Pay */
a.sliced-decline-quote {
	display: inline-flex; align-items: center; justify-content: center;
	height: 56px; padding-inline: 30px;
	background: transparent; color: var(--muted);
	border: 2px solid var(--field); border-radius: var(--radius);
	font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
a.sliced-decline-quote:hover { color: var(--blue); border-color: var(--blue); background: transparent; }

/* ==========================================================================
   Footer
   ========================================================================== */

.tuma-footer { background: var(--blue); color: var(--on-dark); }
.tuma-footer__inner {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 48px 40px;
	max-width: var(--measure); margin: 0 auto;
	padding: 76px var(--gutter) 56px;
}
.tuma-footer .tuma-brand__name { color: var(--white); font-size: 27px; }
.tuma-footer .tuma-brand__tag { color: var(--faint); font-size: 9px; }
.tuma-footer__col { display: flex; flex-direction: column; gap: 16px; }
.tuma-footer__col--brand { gap: 20px; }
.tuma-footer__blurb { font-size: 15px; color: var(--on-dark); margin: 0; }

.tuma-licencechip {
	align-self: flex-start; padding: 8px 14px;
	border: 1px solid var(--blue-border); border-radius: var(--radius);
	font-size: 12px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--red);
}

.tuma-footer__heading {
	font-family: var(--body); font-size: 12px; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase; color: var(--white);
	margin: 0;
}
.tuma-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tuma-footer__list a { font-size: 15px; color: var(--on-dark); }
.tuma-footer__list a:hover { color: var(--white); }

.tuma-footer__phone { display: flex; align-items: center; gap: 11px; color: var(--white); }
.tuma-footer__phone span { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1; }
.tuma-footer__phone .tuma-icon, .tuma-footer__line .tuma-icon { color: var(--red); flex-shrink: 0; }
.tuma-footer__line { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: var(--on-dark); }
.tuma-footer__line--area .tuma-icon { margin-top: 4px; }

.tuma-footer__bottom { border-top: 1px solid var(--blue-line); }
.tuma-footer__bottominner {
	display: flex; align-items: center; justify-content: center; gap: 30px;
	max-width: var(--measure); margin: 0 auto;
	padding: 22px var(--gutter) 26px;
	font-size: 13px; color: var(--faint); text-align: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
	:root { --gutter: 40px; }
	.tuma-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
	.tuma-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.tuma-utility__item--area, .tuma-utility__item--hours { display: none; }
	.tuma-utility__inner { justify-content: center; }

	.tuma-navtoggle { display: inline-flex; }
	.tuma-nav {
		position: fixed; inset: 0; z-index: 9999;
		display: none; margin: 0;
		background: var(--blue);
		padding: 96px var(--gutter) 40px;
		overflow-y: auto;
	}
	.tuma-nav-open .tuma-nav { display: block; }
	.tuma-nav-open { overflow: hidden; }
	.tuma-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.tuma-nav__list a {
		display: block; padding: 18px 0; font-size: 20px; color: var(--white);
		border-bottom: 1px solid var(--blue-line);
	}
	.tuma-masthead__cta .tuma-callout { display: none; }
}

@media (max-width: 767px) {
	:root { --gutter: 20px; }
	body { font-size: 16px; }
	.tuma-section { padding-block: 56px; }
	.tuma-grid--3, .tuma-grid--2 { grid-template-columns: 1fr; }
	.tuma-footer__inner { grid-template-columns: 1fr; gap: 34px; padding-block: 48px 36px; }
	.tuma-footer__bottominner { flex-direction: column; align-items: center; gap: 12px; }

	/* Nothing tappable under 44px */
	.tuma-btn { width: 100%; height: 58px; }
	.tuma-masthead__cta .tuma-btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	a.tuma-card:hover, .tuma-card--hover:hover { transform: none; }
}

/* ==========================================================================
   Page head, prose, CTA, reviews embed
   ========================================================================== */

.tuma-pagehead { position: relative; overflow: hidden; padding-block: 68px 62px; }
.tuma-pagehead h1 { margin-bottom: 18px; }
.tuma-pagehead .tuma-lede { color: var(--on-dark); max-width: 640px; }

.tuma-crumbs {
	display: flex; align-items: center; gap: 10px;
	font-size: 12px; font-weight: 600; letter-spacing: .10em;
	text-transform: uppercase; color: var(--faint); margin-bottom: 22px;
}
.tuma-crumbs a { color: var(--faint); }
.tuma-crumbs a:hover { color: var(--white); }
.tuma-crumbs [aria-current] { color: var(--red); }

.tuma-byline { font-size: 15px; color: var(--faint); margin: 0; }

.tuma-prose { max-width: 760px; }
.tuma-prose h2 { margin-top: 44px; }
.tuma-prose h3 { margin-top: 32px; }
.tuma-prose ul, .tuma-prose ol { padding-left: 22px; margin: 0 0 20px; }
.tuma-prose li { margin-bottom: 10px; }
.tuma-prose blockquote {
	margin: 32px 0; padding: 32px 36px;
	background: var(--sky); border-left: 5px solid var(--red);
	font-family: var(--display); font-size: clamp(21px, 2.4vw, 30px);
	line-height: 1.2; font-weight: 700; color: var(--blue);
}
.tuma-prose blockquote p { margin: 0; }
.tuma-postimage { margin: 0 0 40px; }
.tuma-postimage img { width: 100%; border-radius: var(--radius); }

.tuma-cta { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.tuma-cta h2 { margin-bottom: 12px; }
.tuma-cta p { margin: 0; }

/* Elfsight widget: give it room and keep our type, but don't fight its internals */
.tuma-reviews-embed { margin-top: 8px; }
.tuma-reviews-intro { margin-bottom: 40px; }

.tuma-pagelinks, .navigation.pagination { margin-top: 44px; display: flex; gap: 10px; justify-content: center; }
.navigation.pagination .page-numbers {
	display: grid; place-items: center; min-width: 46px; height: 46px; padding-inline: 12px;
	border: 1px solid var(--field); border-radius: var(--radius);
	color: var(--muted); font-weight: 700;
}
.navigation.pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: var(--white); }

@media (max-width: 767px) {
	.tuma-cta { flex-direction: column; align-items: flex-start; gap: 24px; }
	.tuma-pagehead { padding-block: 44px 40px; }
}

/* ==========================================================================
   Homepage
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */

.tuma-hero { position: relative; overflow: hidden; background: var(--blue); padding-block: 92px 84px; }
.tuma-hero__photo {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; object-position: 34% 42%;
}
.tuma-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(11,42,91,.96) 0%, rgba(11,42,91,.92) 42%, rgba(11,42,91,.66) 100%);
}
.tuma-hero__inner {
	position: relative;
	display: flex; align-items: center; gap: 72px;
}
.tuma-hero__copy { flex: 1 1 auto; max-width: 690px; }
.tuma-hero h1 { color: var(--white); margin-bottom: 26px; }
.tuma-hero__lede { font-size: 20px; line-height: 1.6; color: var(--on-dark); max-width: 560px; margin-bottom: 34px; }
.tuma-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

.tuma-stats {
	display: flex; align-items: stretch; gap: 28px;
	margin: 0; padding-top: 28px; border-top: 1px solid var(--blue-line);
}
.tuma-stats__item { display: flex; flex-direction: column; gap: 3px; }
.tuma-stats__item + .tuma-stats__item { border-left: 1px solid var(--blue-line); padding-left: 28px; }
.tuma-stats dt {
	font-family: var(--display); font-size: 34px; font-weight: 800;
	line-height: 1; color: var(--white);
}
.tuma-stats dd {
	margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--faint); max-width: 180px;
}

/* Crest ------------------------------------------------------------------ */

.tuma-crest {
	position: relative; overflow: hidden;
	flex: 0 0 420px; min-height: 525px;
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	padding: 40px 32px; text-align: center;
	background: var(--page);
	border-left: 5px solid var(--red);
	border-radius: var(--radius);
	box-shadow: 0 18px 40px rgba(0,0,0,.30);
}
/*
 * The whole state stays visible and centred, so the star reads as marking a
 * place on Texas rather than sitting on an unrecognisable crop. Bryan is 78%
 * across the state, so the star lands right of the crest's centre line — that
 * offset is the geography, not a misalignment.
 *
 * The base .tuma-texas opacity has to be lifted here because it applies to the
 * whole SVG and the star lives inside this one; the outline path is faded on
 * its own instead, strongly enough to read as Texas.
 */
.tuma-crest__texas { position: absolute; top: 20px; left: 112px; color: var(--blue); opacity: 1; }
.tuma-crest__texas > path { opacity: .13; }
.tuma-crest__pin path { fill: var(--red); }
.tuma-crest > :not(.tuma-crest__texas) { position: relative; }
/* Clears the absolutely-positioned map above (20 top + 190 tall + 20 gap). */
.tuma-crest { padding-top: 230px; }
.tuma-crest__title {
	font-family: var(--display); font-size: 46px; font-weight: 800;
	line-height: 1; color: var(--blue); text-transform: uppercase; margin: 0;
}
.tuma-crest__sub {
	font-size: 12px; font-weight: 700; letter-spacing: .18em;
	text-transform: uppercase; color: var(--muted); margin: 10px 0 0;
}
.tuma-crest__rule { display: block; width: 64px; height: 3px; margin: 28px 0; background: var(--red); }
.tuma-crest__licence {
	font-family: var(--display); font-size: 52px; font-weight: 800;
	line-height: 1; color: var(--red); margin: 8px 0 0;
}

/* Trust bar -------------------------------------------------------------- */

.tuma-trustbar { background: var(--sky); border-bottom: 1px solid var(--hair); }
.tuma-trustbar__inner {
	display: flex; align-items: center; justify-content: center;
	gap: 20px 72px; padding-block: 26px;
}
.tuma-trustbar__item {
	display: flex; align-items: center; gap: 11px;
	font-size: 14px; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: var(--ink);
}
.tuma-trustbar__item .tuma-icon { color: var(--red); flex-shrink: 0; }

/* Section heads ---------------------------------------------------------- */

.tuma-sectionhead { margin-bottom: 52px; }
.tuma-sectionhead h2 { margin-bottom: 18px; }
.tuma-sectionhead .tuma-lede { max-width: 660px; }
.tuma-sectionhead--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.tuma-sectionhead--split > div { max-width: 720px; }
.tuma-sectionhead--center { text-align: center; }
.tuma-sectionhead--center .tuma-eyebrow { justify-content: center; }
.tuma-sectionhead--center .tuma-eyebrow::before { display: none; }

/* Emergency callout ------------------------------------------------------ */

.tuma-emergency {
	display: flex; align-items: center; gap: 22px;
	margin-top: 24px; padding: 32px 40px;
	background: var(--blue); border-left: 5px solid var(--red); border-radius: var(--radius);
}
.tuma-emergency .tuma-icon--bolt { color: var(--red); flex-shrink: 0; }
.tuma-emergency__copy { flex: 1 1 auto; }
.tuma-emergency h3 { color: var(--white); margin: 0 0 6px; }
.tuma-emergency p { color: var(--on-dark); margin: 0; font-size: 16px; }

/* Who you're calling ----------------------------------------------------- */

.tuma-whocalling { position: relative; overflow: hidden; }
.tuma-whocalling__texas { position: absolute; top: -190px; right: -150px; color: var(--blue); opacity: .06; }
.tuma-whocalling > .tuma-wrap { position: relative; }

.tuma-promises { margin-bottom: 44px; }
.tuma-promises .tuma-card { border: 0; border-top: 4px solid var(--red); }

.tuma-signature {
	display: flex; align-items: center; gap: 16px;
	padding-top: 30px; border-top: 1px solid var(--field);
}
.tuma-signature .tuma-brand__mark { width: 52px; height: 52px; }
.tuma-signature__name { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1; color: var(--blue); margin: 0; }
.tuma-signature__role { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 2px 0 0; }

/* Process ---------------------------------------------------------------- */

.tuma-steps { list-style: none; margin: 0; padding: 0; }
.tuma-step {
	display: flex; flex-direction: column; gap: 16px;
	padding: 38px 34px; background: var(--white);
	border-top: 4px solid var(--red); border-radius: var(--radius);
}
.tuma-step__num { font-family: var(--display); font-size: 64px; font-weight: 800; line-height: .8; color: #D3E1F2; }
.tuma-step h3 { margin: 0; }
.tuma-step p { margin: 0; color: var(--muted); font-size: 16px; }

/* Service area ----------------------------------------------------------- */

.tuma-area { position: relative; overflow: hidden; }
.tuma-area__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.tuma-area__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(11,42,91,.96) 0%, rgba(11,42,91,.90) 52%, rgba(11,42,91,.80) 100%);
}
.tuma-area__inner { position: relative; display: flex; align-items: center; gap: 80px; }
.tuma-area__inner > div:first-child { flex: 1 1 auto; max-width: 600px; }
.tuma-area .tuma-lede { color: var(--on-dark); margin-bottom: 32px; }
.tuma-area__note { font-size: 15px; color: var(--faint); margin: 0; }

.tuma-towns {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px;
	list-style: none; margin: 0 0 34px; padding: 0;
}
.tuma-towns li {
	display: flex; align-items: center; gap: 11px;
	padding: 14px 18px; background: var(--blue-surf); border-radius: var(--radius);
	font-size: 16px; font-weight: 600; color: var(--white);
}
.tuma-towns .tuma-icon { color: var(--red); flex-shrink: 0; }

.tuma-map { position: relative; flex: 0 0 460px; display: grid; place-items: center; }
.tuma-map__outline { position: static; opacity: 1; color: var(--red); }
.tuma-map__outline path { fill: var(--blue-surf); stroke: var(--blue-border); stroke-width: 10; }
.tuma-map__badge {
	position: absolute; right: -8px; top: 55%;
	display: flex; flex-direction: column; gap: 3px;
	margin: 0; padding: 14px 20px;
	background: var(--page); border-left: 4px solid var(--red); border-radius: var(--radius);
}
.tuma-map__badge span { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1; color: var(--blue); text-transform: uppercase; }
.tuma-map__badge small { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Article cards ---------------------------------------------------------- */

.tuma-card--article { padding: 0; overflow: hidden; gap: 0; }
.tuma-card--article .tuma-card__body { display: flex; flex-direction: column; gap: 12px; padding: 28px 30px 30px; }
.tuma-card--article h3 { font-size: 30px; margin: 0; }
.tuma-card--article p { font-size: 15px; }

/* Final CTA -------------------------------------------------------------- */

.tuma-finalcta { position: relative; overflow: hidden; }
.tuma-finalcta__texas { position: absolute; top: -44px; right: 78px; color: var(--blue); opacity: .10; }
.tuma-finalcta > .tuma-wrap { position: relative; }
.tuma-cta__actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.tuma-btn--onredghost { background: transparent; color: var(--white); border: 2px solid #E9A57F; }
.tuma-btn--onredghost:hover { background: var(--white); color: var(--red); border-color: var(--white); }

/* Homepage responsive ---------------------------------------------------- */

@media (max-width: 1100px) {
	.tuma-hero__inner, .tuma-area__inner { flex-direction: column; align-items: flex-start; gap: 48px; }
	.tuma-crest { flex-basis: auto; width: 100%; max-width: 420px; }
	.tuma-map { flex-basis: auto; width: 100%; }
	.tuma-trustbar__inner { flex-wrap: wrap; gap: 16px 32px; justify-content: center; }
	.tuma-sectionhead--split { flex-direction: column; align-items: flex-start; gap: 28px; }
}

@media (max-width: 767px) {
	.tuma-hero { padding-block: 48px 44px; }
	.tuma-hero__scrim { background: linear-gradient(180deg, rgba(11,42,91,.86) 0%, rgba(11,42,91,.94) 55%, rgba(11,42,91,.98) 100%); }
	.tuma-hero__actions { flex-direction: column; align-items: stretch; }
	.tuma-stats { flex-direction: column; align-items: flex-start; gap: 18px; }
	.tuma-stats__item + .tuma-stats__item { border-left: 0; padding-left: 0; }
	.tuma-stats dd { max-width: none; }
	.tuma-emergency { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 22px; }
	.tuma-towns { grid-template-columns: 1fr; }
	.tuma-map__badge { position: static; margin-top: 16px; align-self: flex-start; }
	.tuma-crest { min-height: 0; padding: 32px 24px; }
	.tuma-crest__title { font-size: 36px; }
	.tuma-crest__licence { font-size: 40px; }
}

/* ==========================================================================
   Service detail
   ========================================================================== */

.tuma-pagehead__texas { top: -58px; right: 110px; }

.tuma-servicehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.tuma-servicehead__copy { max-width: 780px; }
.tuma-servicehead__actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

.tuma-servicebody { display: flex; align-items: flex-start; gap: 72px; }
.tuma-prose--service { flex: 1 1 auto; max-width: 760px; }
.tuma-servicebody__side { flex: 0 0 380px; display: flex; flex-direction: column; gap: 20px; }

/* Statistic panel — [tuma_stat] */
.tuma-stat {
	position: relative; overflow: hidden;
	display: flex; align-items: center; gap: 40px;
	padding: 52px 56px; margin: 0 0 46px;
	background: var(--blue); border-left: 5px solid var(--red); border-radius: var(--radius);
}
.tuma-stat__texas { top: -150px; right: -90px; opacity: .08; color: var(--white); }
.tuma-stat__number {
	position: relative; flex-shrink: 0;
	font-family: var(--display); font-size: 128px; font-weight: 800;
	line-height: .82; color: var(--white);
}
.tuma-stat__slash { color: var(--red); }
.tuma-stat__text { position: relative; font-size: 24px; line-height: 1.5; color: var(--on-dark); }

/* Ordered lists in service prose become the numbered benefit rows */
.tuma-prose--numbered ol {
	list-style: none; counter-reset: tuma-step; padding: 0; margin: 0 0 46px;
}
/* The number is positioned, NOT a grid track. As a grid the bare text node
   after <strong> became an anonymous grid item and was auto-placed into the
   72px number column — the body text rendered one word per line. */
.tuma-prose--numbered ol > li {
	counter-increment: tuma-step;
	position: relative;
	padding: 26px 0 26px 72px; margin: 0;
	border-top: 1px solid var(--hair);
}
.tuma-prose--numbered ol > li:last-child { border-bottom: 1px solid var(--hair); }
.tuma-prose--numbered ol > li::before {
	content: counter( tuma-step, decimal-leading-zero );
	position: absolute; left: 0; top: 24px;
	font-family: var(--display); font-size: 40px; font-weight: 800;
	line-height: .9; color: var(--red);
}
.tuma-prose--numbered ol > li > strong,
.tuma-prose--numbered ol > li > b { display: block; font-size: 21px; color: var(--blue); margin-bottom: 7px; }

/* Quote card — shared by the contact page and the service sidebar */
.tuma-quotecard {
	padding: 46px 48px 48px;
	background: var(--white);
	border: 1px solid var(--hair); border-top: 4px solid var(--red);
	border-radius: var(--radius);
	flex: 1 1 auto;
}
.tuma-quotecard__title { font-size: clamp(32px, 3vw, 46px); line-height: 1; margin: 0 0 8px; }
.tuma-quotecard__sub { font-size: 16px; color: var(--muted); margin: 0 0 34px; }

.tuma-quotecard--compact { padding: 34px 32px; border-top-width: 0; }
.tuma-quotecard--compact .tuma-quotecard__title { font-size: 34px; }
.tuma-quotecard--compact .tuma-quotecard__sub { font-size: 15px; margin-bottom: 20px; }

.tuma-quotecard--dark { background: var(--blue); border-color: var(--blue); }
.tuma-quotecard--dark .tuma-quotecard__title { color: var(--white); }
.tuma-quotecard--dark .tuma-quotecard__sub { color: var(--on-dark); }
.tuma-quotecard--dark label { color: var(--white); }
.tuma-quotecard--dark input, .tuma-quotecard--dark textarea {
	background: var(--blue-surf); border-color: var(--blue-border); color: var(--white);
}
.tuma-quotecard--dark ::placeholder { color: var(--faint); }

.tuma-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.tuma-field { margin: 0 0 22px; }
.tuma-form__row .tuma-field { margin-bottom: 0; }
.tuma-form__row { margin-bottom: 22px; }
.tuma-form__submit { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
.tuma-form__note { font-size: 14px; color: #8A96A3; }
.tuma-quotecard--compact .tuma-btn { width: 100%; }

/* Honeypot: off-screen, never display:none — some bots skip hidden fields */
.tuma-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

.tuma-notice {
	padding: 16px 18px; margin: 0 0 26px;
	border-left: 4px solid; border-radius: var(--radius); font-size: 16px;
}
.tuma-notice--ok  { background: #E8F3EC; border-color: #1E7A46; color: #14532B; }
.tuma-notice--bad { background: #FBE9EC; border-color: var(--red); color: #7A0A20; }

/* Sidebar cards */
.tuma-sidecard {
	padding: 28px 30px; background: var(--white);
	border: 1px solid var(--hair); border-radius: var(--radius);
}
.tuma-sidecard--row { display: flex; align-items: center; gap: 16px; padding: 24px 30px; }
.tuma-sidecard--row .tuma-icon { color: var(--red); flex-shrink: 0; }
.tuma-sidecard--urgent { background: var(--sky); border: 0; border-left: 4px solid var(--red); }
.tuma-sidecard__label {
	font-size: 12px; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--muted); margin: 0 0 12px;
}
.tuma-sidecard__head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.tuma-sidecard__head span { font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1; color: var(--blue); }
.tuma-sidecard__head .tuma-icon { color: var(--red); }
.tuma-sidecard__strong { font-size: 15px; font-weight: 700; color: var(--blue); margin: 0; }
.tuma-sidecard__meta { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 3px 0 0; }

.tuma-sidelist { list-style: none; margin: 0; padding: 0; }
.tuma-sidelist li + li { border-top: 1px solid var(--sky); }
.tuma-sidelist a { display: block; padding: 11px 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.tuma-sidelist a:hover { color: var(--red); }
.tuma-sidelist .current_page_item a { color: var(--red); }

/* Contact page split */
.tuma-contact { display: flex; align-items: flex-start; gap: 60px; }
.tuma-contactside { flex: 0 0 420px; display: flex; flex-direction: column; gap: 20px; }
.tuma-direct { display: flex; flex-direction: column; gap: 22px; padding: 36px 34px; background: var(--blue); border-radius: var(--radius); }
.tuma-direct__label { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin: 0; }
.tuma-direct__phone { display: flex; flex-direction: column; gap: 4px; color: var(--white); }
.tuma-direct__phone small, .tuma-direct__item small {
	font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.tuma-direct__phone span { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1; }
.tuma-direct__item { display: flex; flex-direction: column; gap: 4px; }
.tuma-direct__item span { font-size: 18px; font-weight: 600; color: var(--white); }
.tuma-direct__item p { font-size: 15px; line-height: 1.55; color: var(--on-dark); margin: 4px 0 0; }

.tuma-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tuma-chips li { padding: 8px 14px; background: var(--sky); border-radius: var(--radius); font-size: 14px; font-weight: 600; color: var(--ink); }

@media (max-width: 1100px) {
	.tuma-servicebody, .tuma-contact { flex-direction: column; gap: 40px; }
	.tuma-servicebody__side, .tuma-contactside { flex-basis: auto; width: 100%; }
	.tuma-prose--service { max-width: none; }
	.tuma-servicehead { flex-direction: column; align-items: flex-start; gap: 28px; }
}

@media (max-width: 767px) {
	.tuma-stat { flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 26px; }
	.tuma-stat__number { font-size: 84px; }
	.tuma-stat__text { font-size: 19px; }
	.tuma-quotecard { padding: 30px 24px; }
	.tuma-form__row { grid-template-columns: 1fr; }
	.tuma-prose--numbered ol > li { padding-left: 52px; }
	.tuma-prose--numbered ol > li::before { font-size: 32px; top: 26px; }
	.tuma-servicehead__actions { width: 100%; }
}

/* ==========================================================================
   Masthead fixes — found by previewing at ~1024px
   The nav wrapped to two lines, the phone number broke mid-number and the
   CTA button wrapped. Nothing in the header may wrap, and the mobile nav has
   to take over well before 900px: brand + four long items + phone + button
   needs roughly 1180px to sit on one line.
   ========================================================================== */

.tuma-masthead__inner { gap: 28px; }
.tuma-masthead .tuma-brand__name { white-space: nowrap; }
.tuma-masthead .tuma-brand__tag { white-space: nowrap; }
.tuma-nav__list { gap: 26px; }
.tuma-nav__list a { white-space: nowrap; }
.tuma-callout__number,
.tuma-callout__label { white-space: nowrap; }
.tuma-btn { white-space: nowrap; }
.tuma-masthead__cta { flex-shrink: 0; }

@media (max-width: 1300px) {
	.tuma-nav__list { gap: 20px; }
	.tuma-nav__list a { font-size: 14px; }
}

@media (max-width: 1180px) {
	.tuma-navtoggle { display: inline-flex; }
	.tuma-nav {
		position: fixed; inset: 0; z-index: 9999;
		display: none; margin: 0;
		background: var(--blue);
		padding: 96px var(--gutter) 40px;
		overflow-y: auto;
	}
	.tuma-nav-open .tuma-nav { display: block; }
	.tuma-nav-open { overflow: hidden; }
	.tuma-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.tuma-nav__list a {
		display: block; padding: 18px 0; font-size: 20px; color: var(--white);
		border-bottom: 1px solid var(--blue-line);
	}
	.tuma-masthead__inner { gap: 20px; }
	/* Keep the auto margin: it is what pushes the button group to the right
	   edge. Zeroing it bunched brand and buttons together on the left. */
	.tuma-masthead__cta { margin-left: auto; }
	.tuma-navtoggle { order: 99; margin-left: 0; }
}

@media (max-width: 900px) {
	.tuma-masthead__cta .tuma-callout { display: none; }
	/* Masthead only — the footer has room for the tagline and should keep it. */
	.tuma-masthead .tuma-brand__tag { display: none; }
}

/* ==========================================================================
   Mobile fixes — found by testing dev at 375px
   The masthead overflowed (document scrolled to 454px in a 375px viewport)
   and the Elfsight widget rendered 5,846px tall, making the homepage 17,000px
   long. Both fixed here.
   ========================================================================== */

.tuma-callbtn { display: none; }

@media (max-width: 767px) {
	/* The wordmark plus a full-width CTA plus the toggle cannot fit 375px.
	   Shrink the mark, drop the text button, and give the phone its own
	   44px target — tap-to-call matters more than a quote link on a phone. */
	.tuma-masthead .tuma-brand__name { font-size: 21px; }
	.tuma-brand__mark { width: 38px; height: 38px; }
	.tuma-brand__mark svg { width: 21px; height: 21px; }
	.tuma-masthead__inner { gap: 12px; min-height: 72px; }
	.tuma-masthead__cta { gap: 8px; }
	.tuma-quotebtn { display: none; }

	.tuma-callbtn {
		display: inline-flex; align-items: center; justify-content: center;
		width: 46px; height: 46px; flex-shrink: 0;
		background: var(--red); color: var(--white); border-radius: var(--radius);
	}
	.tuma-callbtn:hover { background: var(--red-press); color: var(--white); }
	.tuma-navtoggle { width: 46px; height: 46px; flex-shrink: 0; }
}

@media (max-width: 400px) {
	.tuma-masthead .tuma-brand__name { font-size: 18px; }
	:root { --gutter: 16px; }
}

/* The reviews widget is a full listing, not a teaser. On the homepage cap it
   and fade out — the section already carries a "Read all reviews" button, and
   the Reviews page shows the widget in full. */
/*
 * The homepage shows the reviews widget as a teaser, with "Read all reviews"
 * below it. Elfsight lays the reviews out as a card grid whose row heights we
 * don't control, so a plain height clamp slices cards mid-sentence — and an
 * overlay gradient can't hide that, because it fades to the section colour
 * while the cards sit on a different grey.
 *
 * Mask the element instead: that fades the content itself to transparent, so
 * whatever the clamp lands on dissolves rather than being cut, at every width.
 */
.home .tuma-reviews-embed {
	position: relative;
	max-height: 660px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient( to bottom, #000 0, #000 52%, transparent 96% );
	mask-image: linear-gradient( to bottom, #000 0, #000 52%, transparent 96% );
}

@media (max-width: 767px) {
	/* One column here, so cards are much taller — clamp after roughly one. */
	.home .tuma-reviews-embed {
		max-height: 560px;
		-webkit-mask-image: linear-gradient( to bottom, #000 0, #000 46%, transparent 96% );
		mask-image: linear-gradient( to bottom, #000 0, #000 46%, transparent 96% );
	}
}

/* Belt and braces: nothing should ever scroll the page sideways. */
html, body { overflow-x: hidden; }

@media (max-width: 1180px) {
	.tuma-brand { margin-right: auto; }
}

/* The footer brand block must be allowed to wrap — it sits in a narrow column. */
.tuma-footer .tuma-brand { align-items: flex-start; }
.tuma-footer .tuma-brand__tag { white-space: normal; line-height: 1.5; }
.tuma-footer__col--brand { min-width: 0; }

/* ==========================================================================
   Alignment pass — decisions, not defaults
   ========================================================================== */

/* CTA bands: on phones the buttons were sitting at their content width against
   the left edge with dead space beside them. A call-to-action should own the
   full measure. */
@media (max-width: 767px) {
	.tuma-cta { width: 100%; }
	.tuma-cta__actions { width: 100%; }
	.tuma-cta__actions .tuma-btn { width: 100%; }
	.tuma-cta > div:first-child { width: 100%; }
	.tuma-finalcta .tuma-btn,
	.tuma-band--red .tuma-btn { width: 100%; }

	/* Emergency callout and service head actions likewise. */
	.tuma-emergency .tuma-btn { width: 100%; }
	.tuma-servicehead__actions { width: 100%; }
	.tuma-servicehead__actions .tuma-btn { width: 100%; }
}

/* Tablet: the CTA stays a row, but give the text room and keep the button
   from being squeezed to two lines. */
@media (min-width: 768px) and (max-width: 1100px) {
	.tuma-cta { gap: 36px; }
	.tuma-cta__actions { min-width: 220px; }
}

/* Safety net: a bold lead-in at the start of any list item always breaks onto
   its own line. The migrated copy stores these as <strong>Lead</strong>Body
   with no separator, so without this they run together. */
.tuma-prose li > strong:first-child,
.tuma-prose li > b:first-child { display: block; }

@media (max-width: 767px) {
	/* A long pull quote at 30px display type swallowed the whole phone
	   screen. Smaller type, tighter padding. */
	.tuma-prose blockquote { padding: 24px 22px; margin: 26px 0; }
}