/* ── pages.css — Shared styles for service landing pages ── */
/* Colors: orange #ff6b35, dark #1a1a2e, light #f8f9fa */

:root {
  --sp-orange: #ff6b35;
  --sp-orange-hover: #e55a28;
  --sp-dark: #1a1a2e;
  --sp-dark2: #16213e;
  --sp-light: #f8f9fa;
  --sp-white: #ffffff;
  --sp-gray: #6c757d;
  --sp-border: #dee2e6;
  --sp-shadow: 0 2px 12px rgba(0,0,0,.08);
  --sp-radius: 12px;
  --sp-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sp-heading: 'Playfair Display', Georgia, serif;
  --sp-max-w: 1140px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--sp-font);color:var(--sp-dark);background:var(--sp-white);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--sp-orange);text-decoration:none}
a:hover{color:var(--sp-orange-hover)}

/* ── HEADER ── */
.sp-header{background:var(--sp-dark);color:#fff;position:sticky;top:0;z-index:100;padding:0 20px}
.sp-header-inner{max-width:var(--sp-max-w);margin:0 auto;display:flex;align-items:center;height:56px;gap:8px}
.sp-brand{font-family:var(--sp-heading);font-size:18px;font-weight:700;color:#fff;text-decoration:none;display:flex;align-items:center;gap:6px;white-space:nowrap}
.sp-brand .dot{width:8px;height:8px;border-radius:50%;background:var(--sp-orange);display:inline-block}
.sp-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:nowrap;overflow-x:auto}
.sp-nav a{color:rgba(255,255,255,.85);font-size:14px;font-weight:500;padding:6px 12px;border-radius:6px;white-space:nowrap;transition:background .2s,color .2s}
.sp-nav a:hover,.sp-nav a.active{background:rgba(255,255,255,.12);color:#fff}
.sp-nav-cta{background:var(--sp-orange)!important;color:#fff!important;font-weight:600!important}
.sp-nav-cta:hover{background:var(--sp-orange-hover)!important}
/* Hamburger */
.sp-burger{display:none;background:none;border:none;cursor:pointer;color:#fff;font-size:24px;padding:4px 8px;margin-left:auto;line-height:1;flex-shrink:0}
@media(max-width:768px){
  .sp-nav a{font-size:13px;padding:6px 8px}
}
@media(max-width:600px){
  .sp-burger{display:flex;align-items:center;justify-content:center}
  .sp-nav{display:none;position:absolute;top:56px;left:0;right:0;background:var(--sp-dark);flex-direction:column;gap:0;padding:8px 0 16px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.4)}
  .sp-nav.open{display:flex}
  .sp-nav a{font-size:15px;padding:13px 24px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.07);white-space:normal}
  .sp-nav-cta{margin:10px 16px 0;border-radius:8px!important;text-align:center;border-bottom:none!important;padding:13px 24px!important}
}

/* ── HERO SECTION ── */
.sp-hero{background:linear-gradient(135deg,var(--sp-dark) 0%,var(--sp-dark2) 100%);color:#fff;padding:60px 20px;text-align:center}
.sp-hero-inner{max-width:var(--sp-max-w);margin:0 auto}
.sp-hero h1{font-family:var(--sp-heading);font-size:clamp(28px,5vw,48px);font-weight:800;margin:0 0 12px;line-height:1.15}
.sp-hero .sp-subtitle{font-size:clamp(16px,2.5vw,20px);opacity:.9;margin:0 0 24px;max-width:600px;margin-left:auto;margin-right:auto}
.sp-badge{display:inline-block;background:var(--sp-orange);color:#fff;font-weight:700;font-size:18px;padding:8px 20px;border-radius:8px;margin:8px 4px}
.sp-badge-outline{background:transparent;border:2px solid rgba(255,255,255,.4);font-weight:500;font-size:14px}
.sp-hero-cta{display:inline-flex;align-items:center;gap:8px;background:var(--sp-orange);color:#fff;font-size:18px;font-weight:700;padding:14px 32px;border-radius:10px;border:none;cursor:pointer;margin-top:20px;text-decoration:none;transition:transform .15s,background .2s}
.sp-hero-cta:hover{background:var(--sp-orange-hover);transform:scale(1.03);color:#fff}

/* ── SECTION CONTAINERS ── */
.sp-section{padding:60px 20px}
.sp-section-inner{max-width:var(--sp-max-w);margin:0 auto}
.sp-section-alt{background:var(--sp-light)}
.sp-section h2{font-family:var(--sp-heading);font-size:clamp(22px,4vw,36px);font-weight:700;color:var(--sp-dark);margin:0 0 12px;text-align:center}
.sp-section .sp-section-sub{text-align:center;color:var(--sp-gray);font-size:16px;margin:0 0 36px;max-width:600px;margin-left:auto;margin-right:auto}

/* ── PRICING TABLE ── */
.sp-pricing-table{width:100%;border-collapse:collapse;margin:0 auto 32px;max-width:700px}
.sp-pricing-table th{background:var(--sp-dark);color:#fff;padding:12px 16px;text-align:left;font-size:14px;font-weight:600}
.sp-pricing-table td{padding:12px 16px;border-bottom:1px solid var(--sp-border);font-size:15px}
.sp-pricing-table tr:last-child td{border-bottom:none}
.sp-pricing-table .sp-price{font-weight:700;color:var(--sp-orange);white-space:nowrap}
.sp-pricing-table .sp-note{font-size:13px;color:var(--sp-gray);font-style:italic}
.sp-paint-badge{display:inline-block;background:#e8f5e9;color:#2e7d32;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;margin-left:8px}

/* ── BEFORE/AFTER ── */
.sp-ba{text-align:center;margin:0 auto 24px;max-width:700px}
.sp-ba img{border-radius:var(--sp-radius);box-shadow:var(--sp-shadow);width:100%}
.sp-ba-caption{font-size:13px;color:var(--sp-gray);margin-top:8px}

/* ── FEATURES LIST ── */
.sp-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:0 auto 32px;max-width:800px}
.sp-feature{display:flex;gap:12px;align-items:flex-start}
.sp-feature-icon{font-size:24px;flex-shrink:0;width:36px;text-align:center}
.sp-feature h3{font-size:16px;font-weight:600;margin:0 0 4px}
.sp-feature p{font-size:14px;color:var(--sp-gray);margin:0}

/* ── CROSS-SELL ── */
.sp-cross-sell{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:900px;margin:0 auto}
.sp-cross-card{background:var(--sp-white);border:1px solid var(--sp-border);border-radius:var(--sp-radius);overflow:hidden;transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit}
.sp-cross-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.12);color:inherit}
.sp-cross-card img{width:100%;height:180px;object-fit:cover}
.sp-cross-card-body{padding:16px}
.sp-cross-card h3{font-size:18px;font-weight:700;margin:0 0 4px}
.sp-cross-card .sp-from-price{color:var(--sp-orange);font-weight:700;font-size:16px;margin:0 0 8px}
.sp-cross-card p{font-size:14px;color:var(--sp-gray);margin:0}

/* ── REVIEWS ── */
.sp-reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;max-width:900px;margin:0 auto}
.sp-review-card{background:var(--sp-white);border:1px solid var(--sp-border);border-radius:var(--sp-radius);padding:20px;box-shadow:var(--sp-shadow)}
.sp-review-stars{color:#f4a51c;font-size:18px;margin-bottom:8px}
.sp-review-text{font-size:15px;line-height:1.6;margin-bottom:12px;font-style:italic}
.sp-review-author{font-weight:600;font-size:14px}
.sp-review-date{font-size:12px;color:var(--sp-gray)}

/* ── CTA STRIP ── */
.sp-cta-strip{background:var(--sp-orange);color:#fff;text-align:center;padding:48px 20px}
.sp-cta-strip h2{color:#fff;font-family:var(--sp-heading);font-size:clamp(22px,4vw,34px);margin:0 0 8px}
.sp-cta-strip p{font-size:17px;margin:0 0 24px;opacity:.95}
.sp-cta-strip .sp-btn-white{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--sp-orange);font-weight:700;font-size:18px;padding:14px 32px;border-radius:10px;text-decoration:none;transition:transform .15s}
.sp-cta-strip .sp-btn-white:hover{transform:scale(1.03);color:var(--sp-orange-hover)}

/* ── TRUST BAR ── */
.sp-trust{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding:24px 0;max-width:700px;margin:0 auto}
.sp-trust-item{text-align:center}
.sp-trust-num{font-size:28px;font-weight:800;color:var(--sp-orange)}
.sp-trust-label{font-size:13px;color:var(--sp-gray);margin-top:2px}

/* ── SERVICE CARDS GRID (services hub) ── */
.sp-services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;max-width:1000px;margin:0 auto}
.sp-service-card{background:var(--sp-white);border:1px solid var(--sp-border);border-radius:var(--sp-radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.sp-service-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.12);color:inherit}
.sp-service-card img{width:100%;height:200px;object-fit:cover}
.sp-service-card-body{padding:16px}
.sp-service-card h3{font-size:18px;font-weight:700;margin:0 0 4px}
.sp-service-card .sp-from{color:var(--sp-orange);font-weight:700;font-size:16px}
.sp-service-card .sp-desc{font-size:14px;color:var(--sp-gray);margin:6px 0 0}

/* ── GALLERY GRID ── */
.sp-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;max-width:1100px;margin:0 auto}
.sp-gallery-item{position:relative;border-radius:var(--sp-radius);overflow:hidden;cursor:pointer;box-shadow:var(--sp-shadow);transition:transform .2s}
.sp-gallery-item:hover{transform:scale(1.02)}
.sp-gallery-item img{width:100%;display:block}
.sp-gallery-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;padding:16px;font-weight:600;font-size:15px}
.sp-gallery-label span{display:block;font-size:13px;font-weight:400;opacity:.85;margin-top:2px}

/* ── LIGHTBOX ── */
.sp-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:999;justify-content:center;align-items:center;padding:20px}
.sp-lightbox.active{display:flex}
.sp-lightbox img{max-width:95vw;max-height:90vh;border-radius:8px}
.sp-lightbox-close{position:absolute;top:16px;right:24px;color:#fff;font-size:36px;cursor:pointer;background:none;border:none;z-index:1000}

/* ── BOOKING FORM ── */
.sp-form{max-width:560px;margin:0 auto;background:var(--sp-white);border:1px solid var(--sp-border);border-radius:var(--sp-radius);padding:32px;box-shadow:var(--sp-shadow)}
.sp-form label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;color:var(--sp-dark)}
.sp-form input,.sp-form select,.sp-form textarea{width:100%;padding:12px 14px;border:1px solid var(--sp-border);border-radius:8px;font-size:15px;font-family:var(--sp-font);margin-bottom:16px;transition:border-color .2s}
.sp-form input:focus,.sp-form select:focus,.sp-form textarea:focus{outline:none;border-color:var(--sp-orange)}
.sp-form textarea{resize:vertical;min-height:80px}
.sp-form button[type="submit"]{width:100%;background:var(--sp-orange);color:#fff;font-size:18px;font-weight:700;padding:14px;border:none;border-radius:10px;cursor:pointer;transition:background .2s,transform .15s}
.sp-form button[type="submit"]:hover{background:var(--sp-orange-hover);transform:scale(1.02)}
.sp-form button[type="submit"]:disabled{opacity:.6;cursor:not-allowed;transform:none}
.sp-form .sp-required{color:#e53935;margin-left:2px}
.sp-form-trust{text-align:center;font-size:13px;color:var(--sp-gray);margin-top:16px}
.sp-form-success{text-align:center;padding:40px 20px}
.sp-form-success h3{color:#2e7d32;font-size:24px;margin:0 0 8px}
.sp-form-success p{color:var(--sp-gray);font-size:16px}

/* ── FOOTER ── */
.sp-footer{background:var(--sp-dark);color:rgba(255,255,255,.7);padding:48px 20px 32px}
.sp-footer-inner{max-width:var(--sp-max-w);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px}
.sp-footer h4{color:#fff;font-size:16px;font-weight:700;margin:0 0 12px}
.sp-footer a{color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;display:block;padding:3px 0;transition:color .2s}
.sp-footer a:hover{color:#fff}
.sp-footer-contact{font-size:14px;line-height:1.8}
.sp-footer-contact a{display:inline}
.sp-footer-bottom{max-width:var(--sp-max-w);margin:24px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:13px}

/* ── BREADCRUMB ── */
.sp-breadcrumb{padding:12px 20px;font-size:13px;color:var(--sp-gray);max-width:var(--sp-max-w);margin:0 auto}
.sp-breadcrumb a{color:var(--sp-gray)}
.sp-breadcrumb a:hover{color:var(--sp-orange)}
.sp-breadcrumb span{margin:0 6px;opacity:.5}

/* ── MOBILE: HERO BUTTONS STACK ── */
@media(max-width:480px){
  .sp-hero .sp-badge{display:block;width:100%;margin:6px 0;box-sizing:border-box}
  .sp-hero-cta{display:flex;width:100%;justify-content:center;box-sizing:border-box}
}

/* ── MOBILE: BOOK PAGE STICKY PHONE BAR ── */
.sp-book-sticky{display:none}
@media(max-width:600px){
  .sp-book-sticky{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--sp-dark);padding:10px 16px;z-index:90;gap:10px;box-shadow:0 -2px 12px rgba(0,0,0,.25)}
  .sp-book-sticky a{flex:1;background:var(--sp-orange);color:#fff;text-align:center;padding:12px 8px;border-radius:8px;font-weight:700;font-size:15px;text-decoration:none}
  .sp-book-sticky a:last-child{background:transparent;border:1px solid rgba(255,255,255,.3);font-weight:500;font-size:14px}
  .sp-form{margin-bottom:80px}
}

/* ── Professional Polish ── */
.sp-nav a { transition: color .2s, background .2s; }
.sp-footer a { transition: color .2s; }
.sp-footer a:hover { color: var(--sp-orange); }

.sp-nav a:focus-visible,
.sp-hero-cta:focus-visible,
.sp-btn-white:focus-visible,
.sp-form button:focus-visible,
.sp-form input:focus-visible,
.sp-form select:focus-visible,
.sp-form textarea:focus-visible {
  outline: 3px solid var(--sp-orange);
  outline-offset: 2px;
}

.sp-form button[type="submit"]:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.sp-gallery-item { transition: transform .25s ease, box-shadow .25s ease; }
.sp-gallery-item img { transition: transform .25s ease; }

.sp-cross-card { transition: transform .25s ease, box-shadow .25s ease; }
.sp-cross-card img { transition: transform .25s ease; }
.sp-cross-card:hover img { transform: scale(1.04); }

.sp-breadcrumb span { color: var(--sp-orange); margin: 0 6px; opacity: .6; }

::selection { background: var(--sp-orange); color: #fff; }

@media(max-width:420px){
  .sp-cta-strip div { display:flex; flex-direction:column; align-items:center; gap:10px; }
  .sp-cta-strip div br,
  .sp-cta-strip div > span { display:none; }
}

@media(max-width:600px){
  .sp-pricing-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

html { scroll-behavior: smooth; }

/* ── Before / After grid ──────────────────────────────── */
.sp-ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
@media(max-width:600px){.sp-ba-grid{grid-template-columns:1fr}}
.sp-ba-card{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.10)}
.sp-ba-card img{display:block;width:100%;height:260px;object-fit:cover}
.sp-ba-label{position:absolute;top:10px;left:10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:4px;color:#fff}
.sp-ba-before{background:rgba(0,0,0,.55)}
.sp-ba-after{background:#2e7d32}