/* ServicePlus global styles. Everything here is either (a) a helper class applied via an
   Elementor element's "CSS Classes" field, or (b) a rule Elementor's controls cannot express.
   Colors/sizes that Elementor CAN control live in the Elementor data, not here. */

html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{font-family:var(--sp-font);overflow-x:clip}
::selection{background:var(--sp-orange);color:var(--sp-white)}
:focus-visible{outline:2px solid var(--sp-blue);outline-offset:2px}

/* Balanced headlines, as in the design. */
.sp-balance .elementor-heading-title{text-wrap:balance}

/* ---------- Hero ---------- */
/* Five-stop left→right navy gradient; Elementor's gradient control only has two stops. */
.sp-hero.e-con::before{
  background:linear-gradient(90deg,rgba(1,24,66,0.95) 0%,rgba(1,24,66,0.88) 22%,rgba(1,24,66,0.45) 42%,rgba(1,24,66,0.06) 58%,rgba(1,24,66,0) 70%) !important;
  opacity:1 !important;
}

/* ---------- Buttons ---------- */
/* Design buttons: 15px radius pill-ish, bold 15px. Variants set in Elementor; these cover hover
   states Elementor can't do per-variant without extra controls. */
.sp-btn--hero-primary .elementor-button:hover{background-color:#FF6A2E !important;color:#011842 !important}
.sp-btn--hero-outline .elementor-button{border:1px solid rgba(255,255,255,0.4)}
.sp-btn--hero-outline .elementor-button:hover{border-color:#FFFFFF}
.sp-btn--orange .elementor-button:hover{background-color:#FF6A2E !important;color:#FFFFFF !important}
.sp-btn--white .elementor-button:hover{background-color:#FFFFFF !important;color:#011842 !important}

/* ---------- Arrow links ("Explore Services →") ---------- */
.sp-arrow-link .elementor-heading-title{display:inline-flex;align-items:center;gap:10px;line-height:1}
.sp-arrow-link .elementor-heading-title a{display:inline-flex;align-items:center;gap:10px;color:inherit;transition:color var(--sp-dur-fast) var(--sp-ease)}
.sp-arrow-link .elementor-heading-title a::after{
  content:"";display:inline-block;width:20px;height:12px;flex:none;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' fill='none'%3E%3Cpath d='M0 6h18M13 1l5 5-5 5' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' fill='none'%3E%3Cpath d='M0 6h18M13 1l5 5-5 5' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform var(--sp-dur-fast) var(--sp-ease);
}
.sp-arrow-link .elementor-heading-title a:hover{color:var(--sp-orange)}
.sp-arrow-link .elementor-heading-title a:hover::after{transform:translateX(4px)}
.sp-arrow-link--orange-arrow .elementor-heading-title a::after{background-color:var(--sp-orange)}

/* ---------- Credibility strip (orange band, 5 cells, hairlines) ---------- */
.sp-strip__cell{position:relative;border-top:1px solid var(--sp-hairline-on-orange)}
.sp-strip__cell + .sp-strip__cell::before{
  content:"";position:absolute;left:0;top:clamp(14px,1.6vw,20px);bottom:clamp(14px,1.6vw,20px);width:1px;
  background:var(--sp-hairline-on-orange);transform:scaleX(0.5);transform-origin:left;
}

/* ---------- Featured valve spec row ---------- */
.sp-specrow{border-top:1px solid var(--sp-orange)}
.sp-specrow__cell{position:relative}
.sp-specrow__cell + .sp-specrow__cell::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:var(--sp-hairline)}

/* Counter widgets: design shows number above label with 10px gap, orange tabular numerals. */
.sp-stat .elementor-counter-number-wrapper{font-variant-numeric:tabular-nums;letter-spacing:-0.035em}

/* ---------- Product cards (cut-out PNG on white) ---------- */
.sp-product-img img{width:100%;height:clamp(200px,22vw,280px);object-fit:contain;mix-blend-mode:multiply;display:block}
.sp-card-title--hairline .elementor-heading-title{border-top:1px solid var(--sp-hairline);padding-top:22px}

/* ---------- Service cards: 4:3 photo container with navy multiply overlay ---------- */
.sp-ratio-43.e-con{aspect-ratio:4/3;overflow:hidden}
.sp-ratio-169.e-con{aspect-ratio:16/9;overflow:hidden}

/* ---------- Video block ---------- */
.sp-video .elementor-custom-embed-image-overlay{position:relative}
.sp-video .elementor-custom-embed-image-overlay::before{content:"";position:absolute;inset:0;background:rgba(1,24,66,0.34);pointer-events:none}
.sp-video .elementor-custom-embed-play{
  width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);border-radius:50%;
  border:1px solid rgba(255,255,255,0.6);background:rgba(1,24,66,0.35);
  display:flex;align-items:center;justify-content:center;
  transition:background-color var(--sp-dur-fast) var(--sp-ease),border-color var(--sp-dur-fast) var(--sp-ease);
}
.sp-video .elementor-custom-embed-play i,
.sp-video .elementor-custom-embed-play svg{font-size:30px;width:30px;height:30px;color:#fff;fill:#fff;margin-left:4px;text-shadow:none}
.sp-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play{background:var(--sp-orange);border-color:var(--sp-orange)}
.sp-video-title{pointer-events:none}

/* ---------- Facilities row (Houston, TX / ENGINEERING • MANUFACTURING) ---------- */
.sp-facility-row.e-con{border-top:1px solid var(--sp-hairline);border-bottom:1px solid var(--sp-hairline)}

/* ---------- Footer ---------- */
.sp-footer-cert .elementor-heading-title{border-top:1px solid var(--sp-hairline-on-navy);padding-top:14px}
.sp-footer-links .elementor-icon-list-item a:hover,
.sp-footer-contact a:hover{color:#FF6A2E !important}
.sp-footer-copy.e-con{border-top:1px solid rgba(255,255,255,0.14)}

/* Text editor paragraphs inherit widget color; kill default bottom margins on last child. */
.elementor-widget-text-editor p:last-child{margin-bottom:0}

/* ---------- Featured valve image (design: fixed clamp height, cropped low) ---------- */
.sp-valve-hero img{width:100%;height:clamp(300px,44vw,580px);object-fit:cover;object-position:50% 88%;display:block}
.sp-footer-logo img{height:28px;width:auto}

/* ======================================================================== */
/* Inner-page helpers (tools/lib.php)                                        */
/* ======================================================================== */

/* Strip variants: light (navy text on off-white/white) and dark (white on navy). */
.sp-strip--light .sp-strip__cell{border-top-color:var(--sp-hairline)}
.sp-strip--light .sp-strip__cell + .sp-strip__cell::before{background:var(--sp-hairline);transform:none}
.sp-strip--dark .sp-strip__cell{border-top-color:var(--sp-hairline-on-navy)}
.sp-strip--dark .sp-strip__cell + .sp-strip__cell::before{background:var(--sp-hairline-on-navy);transform:none}

/* Aspect-ratio boxes for image tiles / photo cards. */
.sp-ratio-11.e-con{aspect-ratio:1/1;overflow:hidden}
.sp-ratio-45.e-con{aspect-ratio:4/5;overflow:hidden}
.sp-ratio-1610.e-con{aspect-ratio:16/10;overflow:hidden}
.sp-ratio-281.e-con{aspect-ratio:2.8/1;overflow:hidden}
.sp-photo.e-con{min-height:0}
/* Page-header photo panel (Valves): keep Elementor min-height (design 16:10 on phones) and fade top-down on phones. */
.sp-photo.sp-hero-img.e-con{min-height:var(--min-height)}
@media (max-width:767px){.sp-photo.sp-hero-img.e-con::before{background-image:linear-gradient(180deg,#011842 0%,rgba(1,24,66,0.45) 22%,rgba(1,24,66,0) 55%) !important}}

/* Numbered steps + link cards: hairline on top. */
.sp-steps__cell.e-con{border-top:1px solid var(--sp-hairline)}
.sp-steps__cell--dark.e-con{border-top-color:var(--sp-hairline-on-navy)}
.sp-link-card.e-con{border-top:1px solid var(--sp-hairline);transition:border-color var(--sp-dur-fast) var(--sp-ease)}
.sp-link-card.e-con:hover{border-top-color:var(--sp-orange)}
.sp-link-card:hover .sp-arrow-link .elementor-heading-title{color:var(--sp-orange)}

/* Arrow line without its own link (inside a linked card). */
.sp-arrow-link--static .elementor-heading-title::after{
  content:"";display:inline-block;width:20px;height:12px;flex:none;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' fill='none'%3E%3Cpath d='M0 6h18M13 1l5 5-5 5' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' fill='none'%3E%3Cpath d='M0 6h18M13 1l5 5-5 5' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform var(--sp-dur-fast) var(--sp-ease);
}
.sp-link-card:hover .sp-arrow-link--static .elementor-heading-title::after,
.sp-tile:hover .sp-arrow-link--static .elementor-heading-title::after{transform:translateX(4px)}

/* Chips (outline, uppercase) and pills (filled badge). */
.sp-chip .elementor-heading-title{display:inline-block;padding:8px 14px;border:1px solid rgba(255,255,255,0.3);border-radius:999px;white-space:nowrap}
.sp-chip--light .elementor-heading-title{border-color:rgba(1,24,66,0.2)}
.sp-pill .elementor-heading-title{display:inline-block;padding:7px 14px;border-radius:999px;background:rgba(1,24,66,0.06);white-space:nowrap}
.sp-pill--accent .elementor-heading-title{background:var(--sp-orange)}

/* Breadcrumb "Parent / Current" on dark heroes. */
.sp-breadcrumb .elementor-heading-title span{opacity:0.6}
.sp-breadcrumb .elementor-heading-title .sp-breadcrumb__current{opacity:1}

/* Linked tiles: subtle title hover. */
.sp-tile.sp-card:hover h3.elementor-heading-title{color:var(--sp-orange)}