/* ==========================================================
   SERVICE PAGE TEMPLATE — Matches rawcode/index.php exactly
   Colors, spacing, layout from Tailwind classes converted to CSS
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --yellow: #f9b234;
    --black: #000000;
    --dark-card: #272727;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --white: #ffffff;
    --radius: 0.75rem;
    --radius-xl: 1rem;
}
* { box-sizing: border-box; }
.spt-container { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.spt-container-xl { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.spt-yellow { color: var(--yellow); }

/* ===== MOBILE CALL BUTTON ===== */
.spt-mobile-call { display:none; background:var(--yellow); padding:0.75rem; border-radius:var(--radius-xl); align-items:center; gap:1.25rem; text-decoration:none; color:var(--black); position:relative; z-index:20; margin-bottom:0.75rem; }
.spt-mobile-call__ring { position:relative; width:3.5rem; height:3.5rem; display:flex; align-items:center; justify-content:center; margin-left:0.75rem; }
.spt-mobile-call__ping { position:absolute; width:100%; height:100%; border-radius:9999px; background:#22c55e; opacity:0.75; animation:ping 1s cubic-bezier(0,0,0.2,1) infinite; }
.spt-mobile-call__icon { position:relative; width:3.5rem; height:3.5rem; background:#22c55e; border-radius:9999px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 6px rgba(0,0,0,0.1); color:white; }
.spt-mobile-call__text { display:flex; flex-direction:column; text-align:left; }
.spt-mobile-call__label { font-size:1.25rem; font-weight:600; }
.spt-mobile-call__number { font-size:1.875rem; font-weight:700; }
@keyframes ping { 75%,100% { transform:scale(2); opacity:0; } }
@media(max-width:767px){ .spt-mobile-call{display:flex;} }

/* ===== HERO SECTION (Video BG) ===== */
.spt-hero { position:relative; overflow:hidden; padding:2.5rem 2rem; z-index:1; }
.spt-hero__video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
.spt-hero__inner { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:2.5rem; }
.spt-hero__content { width:50%; color:white; }
.spt-hero__title { font-family:'Inter',sans-serif; font-size:2.25rem; font-weight:800; line-height:1.15; margin:0 0 1.5rem; letter-spacing:-0.025em; }
.spt-hero__subtitle { font-size:1.5rem; margin:0 0 1rem; color:white; }
.spt-hero__badges { display:flex; align-items:center; gap:1rem; margin-bottom:0.75rem; }
.spt-badge { background:var(--white); padding:0.5rem; border-radius:0.5rem; text-decoration:none; display:block; }
.spt-badge img { height:50px; width:auto; display:block; }
.spt-hero__actions { display:flex; flex-wrap:wrap; gap:1rem; }

/* Quote Form */
.spt-quote-form { width:33.33%; padding:2rem; border-radius:1rem; box-shadow:0 20px 25px rgba(0,0,0,0.15); background:var(--white); }
.spt-quote-form__title { font-family:'Inter',sans-serif; font-size:1.875rem; font-weight:700; color:var(--gray-900); text-align:center; margin:0 0 2rem; }
.spt-quote-form__note { text-align:center; color:var(--gray-500); font-size:0.875rem; margin:1.5rem 0 0; }
.spt-form { display:flex; flex-direction:column; gap:0.75rem; }
.spt-form input, .spt-form textarea { width:100%; padding:0.75rem 1rem; border:1px solid var(--gray-300); border-radius:0.5rem; font-size:1rem; font-family:'Inter',sans-serif; outline:none; transition:border 0.2s; }
.spt-form input:focus, .spt-form textarea:focus { border-color:var(--yellow); }

/* Mobile hero */
@media(max-width:767px){
    .spt-hero { padding:0.75rem 1rem 2.5rem; }
    .spt-hero::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.7); z-index:1; }
    .spt-hero__inner { flex-direction:column; }
    .spt-hero__content { width:100%; }
    .spt-hero__content, .spt-hero__title { color:var(--black); }
    .spt-hero__subtitle { color:var(--black); }
    .spt-hero__title { font-size:1.5rem; }
    .spt-quote-form { width:100%; }
}
@media(min-width:768px) and (max-width:1023px){
    .spt-hero__title { font-size:1.875rem; }
    .spt-quote-form { width:40%; }
}

/* ===== BUTTONS ===== */
.spt-btn { display:inline-block; padding:0.75rem 1.5rem; border-radius:0.5rem; font-family:'Inter',sans-serif; font-weight:700; font-size:0.875rem; text-decoration:none; transition:all 0.3s; cursor:pointer; border:none; text-align:center; }
.spt-btn--yellow { background:var(--yellow); color:var(--black); box-shadow:0 4px 6px rgba(0,0,0,0.1); }
.spt-btn--yellow:hover { box-shadow:0 8px 12px rgba(0,0,0,0.15); transform:scale(1.05); }
.spt-btn--dark { background:var(--black); color:var(--white); box-shadow:0 4px 6px rgba(0,0,0,0.1); }
.spt-btn--dark:hover { background:var(--gray-900); color:var(--white); }
.spt-btn--sm { padding:0.5rem 1rem; font-size:0.875rem; margin-top:1rem; }
.spt-btn--full { width:100%; }

/* ===== ACCREDITATIONS ===== */
.spt-accred { background:white; padding:2.5rem 1rem; position:relative; overflow:hidden; }
.spt-accred__circle { display:none; width:450px; height:450px; background:rgba(0,0,0,0.1); border-radius:9999px; position:absolute; top:-250px; left:-200px; }
@media(min-width:768px){ .spt-accred__circle{display:block;} }
.spt-accred__title { font-family:'Inter',sans-serif; font-size:1.5rem; font-weight:600; color:var(--gray-900); text-align:center; margin:0 0 2rem; }
.spt-accred__grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2rem; }
.spt-accred__item { display:flex; flex-direction:column; align-items:center; }
.spt-accred__item img { height:4rem; width:auto; margin-bottom:0.5rem; }
.spt-accred__item p { font-size:0.875rem; color:var(--gray-700); font-weight:500; margin:0; }

/* ===== CONTENT SECTIONS (6 alternating) ===== */
.spt-sec { padding:4rem 1rem; background:var(--white); }
.spt-sec--gray { background:var(--gray-50); }
.spt-sec__grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; max-width:72rem; margin:0 auto; }
.spt-sec__grid--rev { direction:ltr; } /* Text left, Image right */
.spt-sec__title { font-family:'Inter',sans-serif; font-size:1.875rem; font-weight:800; color:var(--gray-900); letter-spacing:-0.025em; margin:0 0 1rem; line-height:1.2; }
.spt-sec__content, .spt-sec__content p { font-family:'Inter',sans-serif; font-size:1.125rem; line-height:1.625; color:var(--gray-700); margin-bottom:1.5rem; }
.spt-sec__content strong { color:var(--gray-800); }
.spt-sec__img img { width:100%; border-radius:var(--radius-xl); box-shadow:0 10px 15px rgba(0,0,0,0.1); object-fit:cover; display:block; }
.spt-sec__bullets { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem 1rem; margin-top:1rem; }
.spt-bullet { display:flex; align-items:center; gap:0.5rem; font-size:1rem; font-weight:500; color:var(--gray-800); }
.spt-bullet__dot { display:inline-block; width:0.5rem; height:0.5rem; background:var(--yellow); border-radius:9999px; flex-shrink:0; }
p span{
    margin:0;
}
@media(max-width:767px){
    .spt-sec__grid { grid-template-columns:1fr; gap:2rem; }
    .spt-sec__title { font-size:1.5rem; }
    .spt-sec__bullets { grid-template-columns:1fr 1fr; }
}

/* ===== PILLS BAR ===== */
.spt-pills-bar { background:var(--dark-card); width:65%; margin:0 auto; border-radius:9999px; }
.spt-pills-bar__inner { padding:1.25rem; display:flex; flex-wrap:wrap; justify-content:center; gap:0.75rem; }
.spt-pill { display:inline-flex; align-items:center; gap:0.5rem; background:var(--yellow); color:var(--black); padding:0.5rem 1rem; border-radius:9999px; font-weight:500; font-size:0.875rem; box-shadow:0 1px 3px rgba(0,0,0,0.1); transition:all 0.3s; }
.spt-pill:hover { box-shadow:0 4px 6px rgba(0,0,0,0.1); transform:scale(1.05); }
@media(max-width:767px){ .spt-pills-bar{width:100%;border-radius:0;background:none;} }

/* ===== SERVICES WE OFFER ===== */
.spt-services { position:relative; overflow:hidden; padding-bottom:4rem; }
.spt-services__header { position:relative; text-align:center; padding-top:2rem; margin-bottom:3rem; }
.spt-services__circle { position:absolute; left:50%; top:-600px; transform:translateX(-50%); width:850px; height:850px; background:var(--black); border-radius:9999px; z-index:0; }
.spt-services__title { font-family:'Inter',sans-serif; font-size:2.25rem; font-weight:800; background:var(--yellow); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; position:relative; z-index:1; padding:1rem; margin:0; }
.spt-services__subtitle { color:var(--gray-300); font-size:1.125rem; max-width:36rem; margin:1rem auto 0; position:relative; z-index:1; }
.spt-services__line { width:5rem; height:0.25rem; background:var(--yellow); margin:1.5rem auto 0; border-radius:9999px; position:relative; z-index:1; }
.spt-services__deco { position:absolute; bottom:0; right:0; width:12rem; height:12rem; background:rgba(249,178,52,0.4); border-radius:1.5rem; }

/* Plumbing animation */
.plumbing-animation { position:relative; width:120px; height:150px; margin:auto; }
.pipe { width:30px; height:80px; background:#4B5563; border-radius:10px; margin:auto; position:relative; }
.faucet { width:60px; height:20px; background:#6B7280; border-radius:10px; position:absolute; top:70px; left:50%; transform:translateX(-50%); }
.drop { width:10px; height:10px; background:#3B82F6; border-radius:50%; position:absolute; top:90px; left:50%; transform:translateX(-50%); animation:drip 1.5s infinite; opacity:0.8; }
@keyframes drip { 0%{transform:translateX(-50%) translateY(0);opacity:1;} 70%{transform:translateX(-50%) translateY(30px);opacity:0.6;} 100%{transform:translateX(-50%) translateY(0);opacity:0;} }

.spt-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.spt-card { position:relative; background:linear-gradient(to bottom right,var(--gray-200),var(--gray-100)); border-radius:var(--radius-xl); box-shadow:0 10px 15px rgba(0,0,0,0.1); padding:1.5rem; text-align:center; transition:all 0.3s; overflow:hidden; }
.spt-card:hover { transform:scale(1.05); box-shadow:0 25px 50px rgba(0,0,0,0.15); }
.spt-card__badge { position:absolute; top:0.75rem; right:0.75rem; background:var(--black); color:var(--white); font-size:0.75rem; font-weight:700; padding:0.25rem 0.5rem; border-radius:9999px; }
.spt-card__icon { margin-bottom:1rem; color:var(--yellow); }
.spt-card__icon svg { margin:0 auto; display:block; }
.spt-card__title { font-family:'Inter',sans-serif; font-size:1.5rem; font-weight:700; color:var(--black); margin:0 0 0.5rem; }
.spt-card__desc { color:var(--black); font-size:1rem; margin:0; }
.spt-card__actions { display:flex; justify-content:center; gap:0.5rem; flex-wrap:wrap; }

@media(max-width:767px){ .spt-cards-grid{grid-template-columns:1fr 1fr;} .spt-services__circle{left:-50px;border-radius:0;width:calc(100%+100px);} }
@media(max-width:480px){ .spt-cards-grid{grid-template-columns:1fr;} }

/* ===== WHY CHOOSE US ===== */
.spt-why { background:var(--black); padding:4rem 1rem; }
.spt-why__header { max-width:40rem; margin:0 auto 3rem; text-align:center; }
.spt-why__title { font-family:'Inter',sans-serif; font-size:1.875rem; font-weight:700; color:var(--white); margin:0 0 1rem; }
.spt-why__subtitle { color:var(--gray-400); font-size:1.125rem; margin:0; }
.spt-why__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.spt-why-card { background:var(--dark-card); padding:1.5rem; border-radius:var(--radius-xl); box-shadow:0 10px 15px rgba(0,0,0,0.1); transition:all 0.3s; }
.spt-why-card:hover { box-shadow:0 20px 25px rgba(0,0,0,0.15); transform:translateY(-4px); }
.spt-why-card__title { font-family:'Inter',sans-serif; font-size:1.25rem; font-weight:600; color:var(--yellow); margin:0 0 0.5rem; }
.spt-why-card__icon { display:block; margin-bottom:1rem; }
.spt-why-card__desc { color:var(--gray-300); font-size:0.875rem; margin:0; line-height:1.5; }
@media(max-width:767px){ .spt-why__grid{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .spt-why__grid{grid-template-columns:1fr;} }

/* ===== MAP ===== */
.spt-map { padding:3rem 1rem; background:var(--white); }
.spt-map__grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
.spt-map__text { padding-top:2.5rem; }
.spt-map__title { font-family:'Inter',sans-serif; font-size:1.5rem; font-weight:800; color:var(--gray-900); margin:0 0 1rem; }
.spt-map__areas { color:var(--gray-600); font-size:1rem; margin:0 0 1.5rem; line-height:1.6; }
.spt-map__embed { border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 10px 15px rgba(0,0,0,0.1); }
.spt-map__embed iframe { width:100%; height:320px; border:0; display:block; }
@media(max-width:767px){ .spt-map__grid{grid-template-columns:1fr;} .spt-map__text{text-align:center;} }

/* ===== REVIEWS ===== */
.spt-reviews { background:#8c8c8c; padding:3rem 1rem; }
.spt-reviews__grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; max-width:72rem; margin:0 auto; }
.spt-reviews__img img { width:100%; border-radius:var(--radius); display:block; }
.spt-reviews__title { font-family:'Inter',sans-serif; font-size:1.875rem; font-weight:700; color:var(--gray-900); margin:0 0 2.5rem; }
.spt-reviews__cards { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.spt-review { background:linear-gradient(to bottom right,var(--gray-200),var(--gray-100)); padding:1.5rem; border-radius:0.5rem; box-shadow:0 10px 15px rgba(0,0,0,0.1); transition:all 0.3s; margin:0; border:none; }
.spt-review:hover { transform:scale(1.05); }
.spt-review p { font-style:italic; margin:0 0 1rem; color:var(--black); font-size:0.95rem; line-height:1.5; }
.spt-review footer { color:var(--black); font-weight:600; font-size:0.9rem; }
.spt-stars { color:var(--yellow); margin-right:0.5rem; }
.spt-review__sep { display:inline; }
.spt-reviews__cta { margin-top:2.5rem; }
@media(max-width:767px){ .spt-reviews__grid{grid-template-columns:1fr;} .spt-reviews__cards{grid-template-columns:1fr;} .spt-review__sep{display:none;} }

/* ===== FAQ ===== */
.spt-faq { background:var(--white); padding:4rem 1rem; }
.spt-faq__grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; max-width:72rem; margin:0 auto; align-items:center; }
.spt-faq__heading { font-family:'Inter',sans-serif; font-size:2.25rem; font-weight:800; margin:0 0 0.5rem; }
.spt-faq__line { width:5rem; height:0.25rem; background:var(--yellow); border-radius:9999px; margin-bottom:3rem; }
.spt-faq-item { background:var(--gray-50); padding:1.5rem; border-radius:var(--radius-xl); box-shadow:0 10px 15px rgba(0,0,0,0.1); transition:all 0.3s; margin-bottom:1rem; }
.spt-faq-item:hover { transform:scale(1.05); }
.spt-faq-item__q { display:flex; align-items:center; gap:0.75rem; }
.spt-faq-item__icon { color:var(--yellow); font-size:1.5rem; }
.spt-faq-item__q h3 { font-family:'Inter',sans-serif; font-size:1.25rem; font-weight:600; color:var(--gray-900); margin:0 0 0.5rem; }
.spt-faq-item p { color:var(--gray-700); font-size:1rem; margin:0; line-height:1.5; }
.spt-faq__img { background:linear-gradient(to top,var(--yellow),var(--white)); border-radius:0 0 var(--radius-xl) var(--radius-xl); }
.spt-faq__img img { width:100%; display:block; }
@media(max-width:767px){ .spt-faq__grid{grid-template-columns:1fr;} .spt-faq-item__q{flex-direction:column;text-align:center;} }

/* ===== BANNER SECTION OVERLAYS (from rawcode) ===== */
@media(max-width:767px){
    .banner_section::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.7); z-index:1; }
    .banner_heading, .banner_list { color:#000; }
}