/* Customer Service page (Phase 8K) - scoped .tts-csr on the tts-home design tokens.
   Includes the real server-validated request form states (default/error/success). */

/* Page parity: no default widget gap/shadow spacing between stacked widgets. */
.elementor-38 .elementor-element.elementor-widget:not(:last-child) { margin-block-end: 0; }
.elementor-38 .e-con,
.elementor-38 .e-con-full { --gap: 0px; gap: 0px; }

/* Normalize theme element margins inside the Customer Service page (low specificity). */
.tts-csr h1, .tts-csr h2, .tts-csr h3, .tts-csr h4,
.tts-csr p, .tts-csr ul, .tts-csr ol, .tts-csr li,
.tts-csr dl, .tts-csr dd, .tts-csr dt,
.tts-csr blockquote, .tts-csr figure, .tts-csr figcaption { margin: 0; }
.tts-csr ul { list-style: none; padding: 0; }

/* ---------- Hero (mirrors the approved meter-reading hero with a wrench pill) ---------- */
.tts-home.tts-home.tts-csr--hero { position: relative; overflow: hidden; background: var(--h-navy-950); }
.tts-home.tts-home .tts-csr__herobg { position: absolute; inset: 0; background: linear-gradient(to bottom right, var(--h-navy-950) 0%, var(--h-navy-900) 50%, var(--h-navy-800) 100%); }
.tts-home.tts-home .tts-csr__herogrid { position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px); background-size: 44px 44px; opacity: 0.6; }
.tts-home.tts-home .tts-csr__heroorb { position: absolute; left: -10rem; top: 2rem; height: 28rem; width: 28rem; border-radius: 9999px; background: rgba(232, 31, 34, 0.15); filter: blur(64px); }
.tts-home.tts-home .tts-csr__heroinner { position: relative; padding-top: 7rem; padding-bottom: 3rem; }
@media (min-width: 640px) { .tts-home.tts-home .tts-csr__heroinner { padding-top: 8rem; } }
.tts-home.tts-home .tts-csr__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: rgba(226, 235, 243, 0.7); }
.tts-home.tts-home .tts-csr__crumbhome { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; text-decoration: none; transition: color 0.15s; }
.tts-home.tts-home .tts-csr__crumbhome:hover { color: #fff; }
.tts-home.tts-home .tts-csr__crumbhome svg { width: 0.875rem; height: 0.875rem; }
.tts-home.tts-home .tts-csr__crumbsep { display: inline-flex; align-items: center; gap: 0.375rem; }
.tts-home.tts-home .tts-csr__crumbsep svg { width: 0.875rem; height: 0.875rem; opacity: 0.6; }
.tts-home.tts-home .tts-csr__crumbsep a { color: inherit; text-decoration: none; transition: color 0.15s; }
.tts-home.tts-home .tts-csr__crumbsep a:hover { color: #fff; }
.tts-home.tts-home .tts-csr__crumbsep span[aria-current] { color: #fff; }
.tts-home.tts-home .tts-csr__herotext { margin-top: 1.75rem; max-width: 48rem; }
.tts-home.tts-home .tts-csr__pill { display: inline-flex; align-items: center; gap: 0.625rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); padding: 0.375rem 1rem; font-size: 10px; line-height: 1.5; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--h-navy-100); backdrop-filter: blur(4px); }
.tts-home.tts-home .tts-csr__pill svg { width: 1rem; height: 1rem; flex: none; color: var(--h-brand-400); }
@media (min-width: 640px) { .tts-home.tts-home .tts-csr__pill { font-size: 11px; letter-spacing: 0.2em; } }
.tts-home.tts-home .tts-csr__h1 { margin-top: 1.5rem; font-family: Manrope, Inter, sans-serif; font-size: 2.5rem; font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
@media (min-width: 640px) { .tts-home.tts-home .tts-csr__h1 { font-size: 3rem; } }
.tts-home.tts-home .tts-csr__h1accent { color: var(--h-brand-500); }
.tts-home.tts-home .tts-csr__herodesc { margin-top: 1.25rem; max-width: 42rem; font-size: 1rem; line-height: 1.625; color: rgba(226, 235, 243, 0.75); }
@media (min-width: 640px) { .tts-home.tts-home .tts-csr__herodesc { font-size: 1.125rem; } }
.tts-home.tts-home .tts-csr__chips { margin-top: 1.75rem; display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0.625rem; }
.tts-home.tts-home .tts-csr__chips li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: rgba(226, 235, 243, 0.85); }
.tts-home.tts-home .tts-csr__chips svg { width: 1rem; height: 1rem; flex: none; color: var(--h-brand-400); }

/* ---------- Main section: 7/5 grid on lg+ (mirrors lg:grid-cols-12 gap-12) ---------- */
.elementor-38 .tts-csr__mainsec { margin-inline: auto; width: 100%; max-width: 80rem; padding: 3.5rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 640px) { .elementor-38 .tts-csr__mainsec { padding: 4rem 1.5rem; } }
@media (min-width: 1024px) {
	.elementor-38 .tts-csr__mainsec {
		padding-inline: 2rem;
		grid-template-columns: calc((100% - 33rem) / 12 * 7 + 18rem) calc((100% - 33rem) / 12 * 5 + 12rem);
		column-gap: 3rem;
		row-gap: 0;
	}
}
.elementor-38 .tts-csr__col { display: flex; flex-direction: column; }
.elementor-38 .tts-csr__colR { gap: 1.25rem; }
@media (min-width: 1024px) { .elementor-38 .tts-csr__colR { position: sticky; top: 7rem; align-self: start; } }

/* ---------- Cards ---------- */
.tts-home.tts-home .tts-csr__card { border-radius: 1.5rem; border: 1px solid var(--h-line); background: #fff; padding: 1.5rem; box-shadow: var(--h-card-shadow); }
.tts-home.tts-home .tts-csr__card--form { padding: 1.5rem; }
@media (min-width: 640px) { .tts-home.tts-home .tts-csr__card--form { padding: 2rem; } }
.tts-home.tts-home .tts-csr__cardh2 { font-family: Manrope, Inter, sans-serif; font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; color: var(--h-navy-900); }
.tts-home.tts-home .tts-csr__cardh2--base { font-family: Manrope, Inter, sans-serif; font-size: 1rem; line-height: 1.5rem; font-weight: 700; }
.tts-home.tts-home .tts-csr__cardsub { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--h-slate-600); }
.tts-home.tts-home .tts-csr__cardsub a { font-weight: 600; color: var(--h-navy-800); text-decoration: none; text-underline-offset: 2px; }
.tts-home.tts-home .tts-csr__cardsub a:hover { text-decoration: underline; }

/* ---------- Form ---------- */
.tts-home.tts-home .tts-csr__form { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.tts-home.tts-home .tts-csr__sech3 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--h-brand-600); }
.tts-home.tts-home .tts-csr__secdesc { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.625; color: var(--h-slate-600); }
.tts-home.tts-home .tts-csr__sec--bt { border-top: 1px solid var(--h-line); padding-top: 1.5rem; }
.tts-home.tts-home .tts-csr__grid2 { margin-top: 1.25rem; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .tts-home.tts-home .tts-csr__grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .tts-home.tts-home .tts-csr__field--full { grid-column: span 2 / span 2; } }
.tts-home.tts-home .tts-csr__secfields { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.tts-home.tts-home .tts-csr__label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--h-navy-900); }
.tts-home.tts-home .tts-csr__req { margin-left: 0.25rem; color: var(--h-brand-500); }
.tts-home.tts-home .tts-csr__input { display: inline-block; vertical-align: baseline; width: 100%; height: 2.75rem; border-radius: 0.75rem; border: 1px solid var(--h-line); background: #fff; padding: 0 0.875rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--h-navy-900); transition: border-color 0.15s, box-shadow 0.15s; }
.tts-home.tts-home .tts-csr__input::placeholder { color: var(--h-slate-400); }
.tts-home.tts-home .tts-csr__input:focus { outline: none; border-color: var(--h-navy-500); box-shadow: 0 0 0 2px rgba(63, 119, 161, 0.25); }
.tts-home.tts-home .tts-csr__textarea { height: auto; padding: 0.75rem 0.875rem; }
.tts-home.tts-home .tts-csr__input--err { border-color: var(--h-brand-400); }
.tts-home.tts-home .tts-csr__input--err:focus { border-color: var(--h-navy-500); box-shadow: 0 0 0 2px rgba(63, 119, 161, 0.25); }
.tts-home.tts-home .tts-csr__hint { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--h-slate-500); }
.tts-home.tts-home .tts-csr__err { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--h-brand-600); }
.tts-home.tts-home .tts-csr__err--form { margin-top: 0; }
.tts-home.tts-home .tts-csr__submitrow { display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid var(--h-line); padding-top: 1.5rem; }
@media (min-width: 640px) { .tts-home.tts-home .tts-csr__submitrow { flex-direction: row; align-items: center; } }
.tts-home.tts-home .tts-csr__submit { width: 100%; border-radius: 0.75rem; }
.tts-home.tts-home .tts-csr__submit svg { width: 1.125rem; height: 1.125rem; }
@media (min-width: 640px) { .tts-home.tts-home .tts-csr__submit { width: auto; } }
.tts-home.tts-home .tts-csr__note { font-size: 0.75rem; line-height: 1.625; color: var(--h-slate-500); }
.tts-home.tts-home .tts-csr__hp { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; overflow: hidden; }
.tts-home.tts-home .tts-csr__ok { margin-top: 2rem; }

/* ---------- Right column cards ---------- */
.tts-home.tts-home .tts-csr__card--urgent { border-color: #fcd34d; background: #fffbeb; }
.tts-home.tts-home .tts-csr__card--urgent .tts-csr__cardh2--base { display: flex; align-items: center; gap: 0.625rem; color: #78350f; }
.tts-home.tts-home .tts-csr__card--urgent .tts-csr__cardh2--base svg { width: 1.25rem; height: 1.25rem; flex: none; color: #78350f; }
.tts-home.tts-home .tts-csr__urgenttext { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: rgba(120, 53, 15, 0.85); }
.tts-home.tts-home .tts-csr__urgentlinks { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.tts-home.tts-home .tts-csr__urgentlinks a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #78350f; text-decoration: none; text-underline-offset: 2px; }
.tts-home.tts-home .tts-csr__urgentlinks a:hover { text-decoration: underline; }
.tts-home.tts-home .tts-csr__urgentlinks svg { width: 1rem; height: 1rem; flex: none; }
.tts-home.tts-home .tts-csr__list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: var(--h-slate-600); }
.tts-home.tts-home .tts-csr__list li { display: flex; align-items: flex-start; gap: 0.625rem; }
.tts-home.tts-home .tts-csr__dot { margin-top: 0.375rem; height: 0.375rem; width: 0.375rem; flex: none; border-radius: 9999px; background: var(--h-brand-500); }
.tts-home.tts-home .tts-csr__footnote { margin-top: 1.25rem; border-top: 1px solid var(--h-line); padding-top: 1rem; font-size: 0.75rem; line-height: 1.625; color: var(--h-slate-500); }
.tts-home.tts-home .tts-csr__footnote a { font-weight: 600; color: var(--h-navy-800); text-decoration: none; text-underline-offset: 2px; transition: color 0.15s; }
.tts-home.tts-home .tts-csr__footnote a:hover { color: var(--h-brand-600); text-decoration: underline; }
.tts-home.tts-home .tts-csr__card--tip { background: var(--h-navy-900); }
.tts-home.tts-home .tts-csr__tiptext { font-size: 0.875rem; line-height: 1.625; color: rgba(226, 235, 243, 0.8); }
.tts-home.tts-home .tts-csr__tiptext strong { font-weight: 700; color: #fff; }

/* Phase 39: Request page body surface parity with deployed Rev06. */
body.page-id-38 { background-color: #050d1a; }