.elementor-14348 .elementor-element.elementor-element-6eee404{--display:flex;}.elementor-14348 .elementor-element.elementor-element-723252a{width:100%;max-width:100%;}.elementor-14348 .elementor-element.elementor-element-723252a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-723252a *//* ==========================================================================
   TEMPCO FRH ENERGY SOLUTIONS — Services page (Elementor-safe v3)
   - Everything namespaced under .tempco-services to beat theme cascade
   - !important applied to font sizes and widths to override Elementor/theme
   - Sections break out of Elementor's container using viewport-width trick
   ========================================================================== */

/* --------------------------------------------------------------------------
   FULL-WIDTH BREAKOUT — forces sections edge-to-edge regardless of
   the parent container's max-width. This works inside Elementor.
   -------------------------------------------------------------------------- */
.tempco-services {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* --------------------------------------------------------------------------
   DESIGN TOKENS (scoped to .tempco-services so they don't leak)
   -------------------------------------------------------------------------- */
.tempco-services {
  --ts-primary:        #C8102E;
  --ts-primary-dark:   #9E0C24;
  --ts-secondary:      #003366;
  --ts-secondary-dark: #001F3F;
  --ts-accent:         #F5A623;
  --ts-text:           #1A1A1A;
  --ts-text-muted:     #4A4A4A;
  --ts-border:         #E5E5E5;
  --ts-bg:             #FFFFFF;
  --ts-bg-soft:        #F7F8FA;
  --ts-bg-tint:        #FAF6F2;

  /* Type scale — LARGER than before, with explicit minimums */
  --ts-fs-sm:    1rem;          /* 16px */
  --ts-fs-base:  1.125rem;      /* 18px */
  --ts-fs-md:    1.25rem;       /* 20px */
  --ts-fs-lg:    1.5rem;        /* 24px */
  --ts-fs-xl:    1.875rem;      /* 30px */
  --ts-fs-2xl:   2.5rem;        /* 40px */
  --ts-fs-3xl:   3.25rem;       /* 52px */

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: var(--ts-fs-base) !important;
  line-height: 1.65 !important;
  color: var(--ts-text) !important;
  background: var(--ts-bg);
}

/* Reset everything inside our namespace to override theme defaults */
.tempco-services *,
.tempco-services *::before,
.tempco-services *::after {
  box-sizing: border-box !important;
}

.tempco-services img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY — !important to beat theme h1/h2/h3 styles
   -------------------------------------------------------------------------- */
.tempco-services h1,
.tempco-services h2,
.tempco-services h3,
.tempco-services h4,
.tempco-services .ts-h1,
.tempco-services .ts-h2 {
  font-family: inherit !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--ts-secondary) !important;
  margin: 0 0 1rem !important;
  letter-spacing: -0.015em !important;
}

.tempco-services .ts-h1,
.tempco-services h1 {
  font-size: var(--ts-fs-3xl) !important;
  line-height: 1.1 !important;
}

.tempco-services .ts-h2,
.tempco-services h2 {
  font-size: var(--ts-fs-2xl) !important;
}

.tempco-services h3 {
  font-size: var(--ts-fs-lg) !important;
}

.tempco-services p {
  margin: 0 0 1rem !important;
  font-size: var(--ts-fs-base) !important;
  line-height: 1.65 !important;
  color: inherit;
}

.tempco-services a {
  color: var(--ts-primary);
  text-decoration: none;
  transition: color 0.25s ease;
}
.tempco-services a:hover { color: var(--ts-primary-dark); }

/* --------------------------------------------------------------------------
   CONTAINER — controls inner content width (the section is full-width)
   -------------------------------------------------------------------------- */
.tempco-services .ts-container {
  width: 100% !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
}
.tempco-services .ts-container--narrow {
  max-width: 880px !important;
}

.tempco-services .ts-section-header {
  text-align: center !important;
  max-width: 800px !important;
  margin: 0 auto 3rem !important;
}

.tempco-services .ts-section-subtitle {
  font-size: var(--ts-fs-md) !important;
  color: var(--ts-text-muted) !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

.tempco-services .ts-eyebrow {
  display: inline-block !important;
  font-size: var(--ts-fs-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ts-primary) !important;
  margin: 0 0 0.75rem !important;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.tempco-services .ts-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1rem 2rem !important;
  font-size: var(--ts-fs-base) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.tempco-services .ts-btn--primary {
  background: var(--ts-primary) !important;
  color: #fff !important;
}
.tempco-services .ts-btn--primary:hover {
  background: var(--ts-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.tempco-services .ts-btn--secondary {
  background: transparent !important;
  color: var(--ts-secondary) !important;
  border-color: var(--ts-secondary) !important;
}
.tempco-services .ts-btn--secondary:hover {
  background: var(--ts-secondary) !important;
  color: #fff !important;
}

.tempco-services .ts-btn--ghost {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.6) !important;
}
.tempco-services .ts-btn--ghost:hover {
  background: #fff !important;
  color: var(--ts-secondary) !important;
  border-color: #fff !important;
}

.tempco-services .ts-btn--large {
  padding: 1.25rem 2.5rem !important;
  font-size: var(--ts-fs-md) !important;
}

/* --------------------------------------------------------------------------
   SECTION 1 — HERO
   -------------------------------------------------------------------------- */
.tempco-services .ts-hero {
  padding: 6rem 0 5rem !important;
  background: linear-gradient(135deg, #F7F8FA 0%, #FFFFFF 100%) !important;
  position: relative;
  overflow: hidden;
}

.tempco-services .ts-hero::before {
  content: "";
  position: absolute;
  top: -200px; right: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(200,16,46,0.06) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.tempco-services .ts-hero__inner {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 4rem !important;
  align-items: center !important;
  position: relative;
  z-index: 1;
}

.tempco-services .ts-hero__content { max-width: 640px; }

.tempco-services .ts-hero__lede {
  font-size: var(--ts-fs-md) !important;
  color: var(--ts-text-muted) !important;
  line-height: 1.7 !important;
  margin-bottom: 2rem !important;
}

.tempco-services .ts-hero__cta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}

.tempco-services .ts-hero__media img {
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05) !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  width: 100% !important;
}

@media (max-width: 900px) {
  .tempco-services .ts-hero { padding: 3rem 0 !important; }
  .tempco-services .ts-hero__inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .tempco-services .ts-hero__media { order: -1; }
  .tempco-services .ts-hero__cta .ts-btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   SECTION 2 — TRUST BADGES
   -------------------------------------------------------------------------- */
.tempco-services .ts-trust {
  padding: 4rem 0 !important;
  background: var(--ts-secondary) !important;
  color: #fff !important;
}

.tempco-services .ts-trust__grid {
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
}

.tempco-services .ts-trust__item {
  text-align: center !important;
  padding: 1rem 0.75rem !important;
}

.tempco-services .ts-trust__icon {
  font-size: 3rem !important;
  margin-bottom: 0.75rem !important;
  color: var(--ts-accent) !important;
  line-height: 1 !important;
}

.tempco-services .ts-trust__title {
  font-size: var(--ts-fs-md) !important;
  color: #fff !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.3 !important;
}

.tempco-services .ts-trust__item p {
  font-size: var(--ts-fs-base) !important;
  color: rgba(255,255,255,0.9) !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

@media (max-width: 1024px) {
  .tempco-services .ts-trust__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; }
}
@media (max-width: 480px) {
  .tempco-services .ts-trust__grid { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------------
   SECTION 3 — SERVICES GRID
   -------------------------------------------------------------------------- */
.tempco-services .ts-services { padding: 6rem 0 !important; }

.tempco-services .ts-services__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
}

.tempco-services .ts-card {
  background: #fff !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.tempco-services .ts-card:hover {
  border-color: var(--ts-primary) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.tempco-services .ts-card__icon {
  font-size: 2.5rem !important;
  margin-bottom: 1rem !important;
  width: 68px !important; height: 68px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ts-bg-tint) !important;
  border-radius: 10px !important;
}

.tempco-services .ts-card__title {
  font-size: var(--ts-fs-md) !important;
  margin-bottom: 1rem !important;
  line-height: 1.3 !important;
}

.tempco-services .ts-card__title a {
  color: var(--ts-secondary) !important;
}
.tempco-services .ts-card__title a:hover { color: var(--ts-primary) !important; }

.tempco-services .ts-card p {
  font-size: var(--ts-fs-base) !important;
  color: var(--ts-text-muted) !important;
  flex-grow: 1 !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.6 !important;
}

.tempco-services .ts-card__link {
  font-weight: 600 !important;
  font-size: var(--ts-fs-base) !important;
  margin-top: auto !important;
}

@media (max-width: 1200px) {
  .tempco-services .ts-services__grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
  .tempco-services .ts-services__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .tempco-services .ts-services__grid { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------------
   SECTION 4 — WHY CHOOSE
   -------------------------------------------------------------------------- */
.tempco-services .ts-why {
  padding: 6rem 0 !important;
  background: var(--ts-bg-soft) !important;
}

.tempco-services .ts-why__grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
}

.tempco-services .ts-why__item {
  background: #fff !important;
  border-left: 4px solid var(--ts-primary) !important;
  padding: 2rem 2.5rem !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.tempco-services .ts-why__item h3 {
  color: var(--ts-secondary) !important;
  margin-bottom: 0.75rem !important;
  font-size: var(--ts-fs-lg) !important;
}

.tempco-services .ts-why__item p {
  color: var(--ts-text-muted) !important;
  margin: 0 !important;
  font-size: var(--ts-fs-base) !important;
  line-height: 1.65 !important;
}

@media (max-width: 800px) {
  .tempco-services .ts-why__grid { grid-template-columns: 1fr !important; }
  .tempco-services .ts-why__item { padding: 1.5rem 2rem !important; }
}

/* --------------------------------------------------------------------------
   SECTION 5 — PROCESS
   -------------------------------------------------------------------------- */
.tempco-services .ts-process { padding: 6rem 0 !important; }

.tempco-services .ts-process__list {
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
}

.tempco-services .ts-process__step {
  position: relative;
  padding: 3rem 2rem !important;
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid var(--ts-border) !important;
}

.tempco-services .ts-process__number {
  display: inline-block !important;
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  color: var(--ts-primary) !important;
  line-height: 1 !important;
  margin-bottom: 1rem !important;
}

.tempco-services .ts-process__step h3 {
  font-size: var(--ts-fs-lg) !important;
  margin-bottom: 0.75rem !important;
}

.tempco-services .ts-process__step p {
  color: var(--ts-text-muted) !important;
  margin: 0 !important;
  font-size: var(--ts-fs-base) !important;
  line-height: 1.65 !important;
}

@media (max-width: 900px) {
  .tempco-services .ts-process__list { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------------
   SECTION 6 — CREDENTIALS
   -------------------------------------------------------------------------- */
.tempco-services .ts-credentials {
  padding: 4rem 0 !important;
  background: var(--ts-bg-tint) !important;
}

.tempco-services .ts-credentials__list {
  list-style: none !important;
  margin: 0 auto !important; padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  max-width: 980px !important;
}

.tempco-services .ts-credential {
  background: #fff !important;
  text-align: center !important;
  padding: 3rem 1.5rem !important;
  border-radius: 10px !important;
  border: 1px solid var(--ts-border) !important;
}

.tempco-services .ts-credential__icon {
  font-size: 2.5rem !important;
  margin-bottom: 0.75rem !important;
}

.tempco-services .ts-credential h3 {
  font-size: var(--ts-fs-md) !important;
  margin-bottom: 0.5rem !important;
}

.tempco-services .ts-credential p {
  margin: 0 !important;
  font-size: var(--ts-fs-base) !important;
  color: var(--ts-text-muted) !important;
}

@media (max-width: 800px) {
  .tempco-services .ts-credentials__list { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------------
   SECTION 7 — FAQ
   -------------------------------------------------------------------------- */
.tempco-services .ts-faq { padding: 6rem 0 !important; }

.tempco-services .ts-faq__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.tempco-services .ts-faq__item {
  background: #fff !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: border-color 0.25s ease !important;
}

.tempco-services .ts-faq__item[open] { border-color: var(--ts-primary) !important; }

.tempco-services .ts-faq__item summary {
  cursor: pointer !important;
  padding: 1.5rem 2rem !important;
  font-weight: 600 !important;
  font-size: var(--ts-fs-md) !important;
  color: var(--ts-secondary) !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  transition: background 0.25s ease !important;
}

.tempco-services .ts-faq__item summary:hover { background: var(--ts-bg-soft) !important; }
.tempco-services .ts-faq__item summary::-webkit-details-marker { display: none !important; }

.tempco-services .ts-faq__item summary::after {
  content: "+" !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  color: var(--ts-primary) !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.tempco-services .ts-faq__item[open] summary::after {
  content: "−" !important;
}

.tempco-services .ts-faq__answer {
  padding: 0 2rem 1.5rem !important;
  color: var(--ts-text-muted) !important;
  font-size: var(--ts-fs-base) !important;
  line-height: 1.65 !important;
}

.tempco-services .ts-faq__answer p:last-child { margin-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   SECTION 8 — FINAL CTA
   -------------------------------------------------------------------------- */
.tempco-services .ts-cta {
  padding: 6rem 0 !important;
  background: linear-gradient(135deg, var(--ts-secondary) 0%, var(--ts-secondary-dark) 100%) !important;
  color: #fff !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
}

.tempco-services .ts-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(200,16,46,0.2) 0%, transparent 50%);
  pointer-events: none;
}

.tempco-services .ts-cta > * { position: relative; z-index: 1; }

.tempco-services .ts-cta h2 {
  color: #fff !important;
  margin-bottom: 1rem !important;
}

.tempco-services .ts-cta p {
  font-size: var(--ts-fs-md) !important;
  color: rgba(255,255,255,0.9) !important;
  max-width: 660px !important;
  margin: 0 auto 2rem !important;
  line-height: 1.6 !important;
}

.tempco-services .ts-cta__buttons {
  display: flex !important;
  gap: 1rem !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

@media (max-width: 480px) {
  .tempco-services .ts-cta__buttons { flex-direction: column !important; align-items: stretch !important; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tempco-services *,
  .tempco-services *::before,
  .tempco-services *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================================================
   ALIGNMENT & ICON COLOR FIXES
   ============================================================ */

/* Force trust badge icons to be amber (visible on navy) */
.tempco-services .ts-trust__icon {
  color: #F5A623 !important;
  filter: none !important;
}

/* Replace emoji with CSS-styled icons that always render correctly */
.tempco-services .ts-trust__item:nth-child(1) .ts-trust__icon,
.tempco-services .ts-trust__item:nth-child(2) .ts-trust__icon {
  font-family: -apple-system, "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  -webkit-text-fill-color: #F5A623 !important;
}

/* Make all cards equal height in process and credentials sections */
.tempco-services .ts-process__list,
.tempco-services .ts-credentials__list {
  align-items: stretch !important;
}

.tempco-services .ts-process__step,
.tempco-services .ts-credential {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Center credential icons properly */
.tempco-services .ts-credential__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 56px !important;
  line-height: 1 !important;
}

/* Force consistent line-height on credential descriptions */
.tempco-services .ts-credential p {
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}/* End custom CSS */