/* ===========================================================
   Siesta Pavement Solutions - site design system
   -----------------------------------------------------------
   HOME: one stylesheet, loaded site-wide.
     WordPress -> WPCode > Add Snippet > CSS Snippet > Auto Insert > Site Wide Header
   NEVER paste this into page content inside a <style> tag. On a Classic
   editor page WordPress injects <br /> into style blocks and destroys every
   rule, taking the whole page down.
   Also avoid Appearance > Customize > Additional CSS: that validator rejects
   CSS Grid and fr units.

   Deliberately flexbox only, no grid, no fr units, no var() in the places
   that matter, so it survives every validator we have hit so far.

   Palette: deep Gulf navy + teal, sand highlight.
   =========================================================== */

.sps { --ink:#1d3557; --accent:#2a9d8f; --accent-d:#21867a; --sand:#e9c46a;
       --muted:#4a5a68; --line:#dfe5ea; --bg:#f5f7f8;
       font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       color:#1d3557; line-height:1.65; max-width:1180px; margin:0 auto; }
.sps *{box-sizing:border-box;}
.sps img{max-width:100%;height:auto;display:block;}

/* ---------- hero ---------- */
.sps .sps-hero{background:#1d3557;color:#fff;border-radius:16px;padding:52px 28px;text-align:center;margin:0 0 26px;}
.sps .sps-kicker{display:inline-block;background:#2a9d8f;color:#fff;font-weight:700;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;padding:7px 16px;border-radius:999px;margin-bottom:18px;}
.sps .sps-hero h2,.sps .sps-hero .sps-h1{font-size:2.3rem;line-height:1.18;margin:0 0 14px;color:#fff;font-weight:800;}
.sps .sps-hero p{color:#cfd9e3;max-width:760px;margin:0 auto 22px;}

/* ---------- buttons ---------- */
.sps .sps-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.sps .sps-btn{display:inline-block;padding:14px 26px;border-radius:10px;font-weight:700;text-decoration:none;}
.sps .sps-btn.primary{background:#e9c46a;color:#1d3557;}
.sps .sps-btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);}
.sps .sps-btn.primary:hover{background:#f0d489;}

/* ---------- answer-first block ---------- */
.sps .sps-answer{background:#fdf6e3;border-left:5px solid #e9c46a;border-radius:0 10px 10px 0;
  padding:18px 22px;margin:0 0 30px;}
.sps .sps-answer strong{color:#1d3557;}

/* ---------- section headings ---------- */
.sps .sps-sec{margin:0 0 40px;}
.sps .sps-sec h2{font-size:1.65rem;border-left:5px solid #e9c46a;padding-left:14px;margin:0 0 16px;font-weight:800;}
.sps .sps-sec h3{font-size:1.2rem;margin:0 0 8px;font-weight:700;}

/* ---------- trust badges ---------- */
.sps .sps-badges{display:flex;flex-wrap:wrap;gap:16px;margin:26px 0;}
.sps .sps-badge{flex:1 1 260px;border:1px solid #dfe5ea;border-radius:12px;padding:20px;text-align:center;background:#fff;}
.sps .sps-big{display:block;font-size:1.5rem;font-weight:800;color:#1d3557;margin-bottom:4px;}
.sps .sps-lbl{color:#4a5a68;font-size:.93rem;}

/* ---------- service cards ---------- */
.sps .sps-cards{display:flex;flex-wrap:wrap;gap:16px;}
.sps .sps-card{flex:1 1 320px;border:1px solid #dfe5ea;border-radius:12px;padding:22px;background:#fff;}
.sps .sps-card h3{color:#1d3557;}
.sps .sps-card p{color:#4a5a68;margin:0;}

/* ---------- numbered process ---------- */
.sps ol.sps-steps{counter-reset:step;list-style:none!important;padding-left:0!important;margin:0;
  display:flex;flex-direction:column;gap:14px;}
.sps ol.sps-steps>li{counter-increment:step;position:relative;background:#f5f7f8;border-radius:12px;
  padding:20px 20px 20px 74px;list-style:none!important;min-width:0;}
.sps ol.sps-steps>li::marker{content:""!important;}
.sps ol.sps-steps>li::before{content:counter(step);position:absolute;left:18px;top:50%;
  transform:translateY(-50%);width:40px;height:40px;background:#e9c46a;color:#1d3557;border-radius:50%;
  font-weight:800;display:flex;align-items:center;justify-content:center;}

/* ---------- checked feature list ---------- */
.sps ul.sps-feats{display:flex;flex-wrap:wrap;gap:12px;list-style:none!important;padding-left:0!important;margin:0;}
.sps ul.sps-feats>li{flex:1 1 320px;background:#fff;border:1px solid #dfe5ea;border-radius:10px;
  padding:14px 16px 14px 44px;position:relative;list-style:none!important;min-width:0;overflow-wrap:break-word;}
.sps ul.sps-feats>li::marker{content:""!important;}
.sps ul.sps-feats>li::before{content:"\2714";position:absolute;left:16px;top:14px;color:#21867a;font-weight:800;}

/* ---------- gallery ---------- */
.sps .sps-gallery{display:flex;flex-wrap:wrap;gap:12px;}
.sps .sps-shot{flex:1 1 300px;max-width:calc(33.333% - 8px);border-radius:12px;overflow:hidden;
  border:1px solid #dfe5ea;background:#fff;}
.sps .sps-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.sps .sps-shot figcaption{padding:10px 12px;font-size:.88rem;color:#4a5a68;}

/* ---------- town pills ---------- */
.sps .sps-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 14px;}
.sps .sps-pill{background:#1d3557;color:#fff;border-radius:999px;padding:8px 18px;font-size:.9rem;font-weight:600;}

/* ---------- FAQ ---------- */
.sps details{border-bottom:1px solid #dfe5ea;}
.sps summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;}
.sps summary::-webkit-details-marker{display:none;}
.sps summary::after{content:"+";float:right;color:#21867a;font-weight:800;}
.sps details[open] summary::after{content:"\2212";}
.sps details p{margin:0 0 16px;color:#4a5a68;}

/* ---------- CTA ---------- */
.sps .sps-cta{background:#1d3557;color:#fff;border-radius:16px;padding:34px 28px;margin:34px 0;}
.sps .sps-cta h2{color:#fff;border-left-color:#e9c46a;}
.sps .sps-cta a{color:#e9c46a;}
.sps ul.sps-info{list-style:none!important;padding-left:0!important;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;}
.sps ul.sps-info>li{flex:1 1 300px;list-style:none!important;min-width:0;overflow-wrap:break-word;color:#cfd9e3;}
.sps ul.sps-info>li::marker{content:""!important;}
.sps ul.sps-info strong{color:#fff;}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .sps .sps-shot{max-width:calc(50% - 6px);}
}
@media (max-width:640px){
  .sps .sps-hero{padding:34px 18px;}
  .sps .sps-hero h2,.sps .sps-hero .sps-h1{font-size:1.7rem;}
  .sps .sps-shot{max-width:100%;}
  .sps .sps-badge,.sps .sps-card,.sps ul.sps-feats>li,.sps ul.sps-info>li{flex-basis:100%;}
}

/* ---------- video hero ---------- */
/* Real job footage only. Encode to <= 3 MB, 1280x720, 12-18s silent loop, H.264 MP4.
   Always ship a poster: it is what mobile and slow connections actually see. */
.sps .sps-hero-video{position:relative;border-radius:16px;overflow:hidden;margin:0 0 26px;
  min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;
  background:#1d3557 center/cover no-repeat;}
.sps .sps-hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.sps .sps-hero-video .sps-veil{position:absolute;inset:0;background:rgba(29,53,87,.62);z-index:1;}
.sps .sps-hero-video .sps-hero-inner{position:relative;z-index:2;padding:52px 24px;color:#fff;max-width:820px;}
.sps .sps-hero-video h2,.sps .sps-hero-video .sps-h1{color:#fff;font-size:2.4rem;line-height:1.15;
  margin:0 0 14px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.35);}
.sps .sps-hero-video p{color:#e6edf4;max-width:680px;margin:0 auto 22px;}

/* Do not autoplay motion for people who asked not to see it */
@media (prefers-reduced-motion: reduce){
  .sps .sps-hero-video video{display:none;}
}

/* ---------- mobile sticky call bar ---------- */
.sps-callbar{display:none;}
@media (max-width:768px){
  .sps-callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9999;
    background:#21867a;box-shadow:0 -2px 12px rgba(0,0,0,.25);}
  .sps-callbar a{flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:56px;color:#fff;font-weight:700;text-decoration:none;font-size:1.02rem;}
  .sps-callbar a+a{border-left:1px solid rgba(255,255,255,.28);}
  .sps-callbar a.alt{background:#e9c46a;color:#1d3557;}
  body{padding-bottom:56px;}
}

/* ---------- mobile refinements ---------- */
@media (max-width:768px){
  /* every tappable thing clears the 44px touch target minimum */
  .sps .sps-btn{min-height:48px;display:flex;align-items:center;justify-content:center;width:100%;}
  .sps .sps-btns{flex-direction:column;}
  .sps summary{padding:18px 0;min-height:48px;}
  .sps .sps-hero-video{min-height:340px;}
  .sps .sps-hero-video h2,.sps .sps-hero-video .sps-h1{font-size:1.75rem;}
  .sps .sps-sec h2{font-size:1.4rem;}
  .sps ol.sps-steps>li{padding:18px 16px 18px 64px;}
  .sps .sps-pill{font-size:.95rem;padding:10px 18px;}
  /* stop long phone numbers and URLs blowing out the layout */
  .sps a[href^="tel:"],.sps a[href^="mailto:"]{overflow-wrap:break-word;}
}
@media (max-width:400px){
  .sps .sps-hero-video h2,.sps .sps-hero-video .sps-h1{font-size:1.5rem;}
  .sps .sps-badge .sps-big{font-size:1.25rem;}
}

/* =========================================================
   SITE SHELL  -  header, page title, footer.
   Generated by build.py, so these are outside the .sps wrapper.
   ========================================================= */
/* White header: the logo is black artwork on white, it needs a light bar. */
.sps-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:10px 22px;background:#fff;border-bottom:3px solid #e9c46a;
  box-shadow:0 2px 10px rgba(0,0,0,.08);position:sticky;top:0;z-index:500;}
.sps-brand{display:block;line-height:0;}
.sps-brand img{height:56px;width:auto;display:block;}
.sps-nav nav{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;}
.sps-nav nav a{color:#1d3557;text-decoration:none;font-weight:700;font-size:.96rem;padding:6px 2px;}
.sps-nav nav a:hover{color:#21867a;}
.sps-nav nav a[aria-current="page"]{color:#1d3557;border-bottom:3px solid #e9c46a;}
.sps-nav-cta{background:#e9c46a;color:#1d3557;font-weight:800;text-decoration:none;
  padding:10px 18px;border-radius:8px;white-space:nowrap;}
/* mobile menu control. Hidden on desktop, the nav shows inline there. */
.sps-menu-chk{position:absolute;width:1px;height:1px;opacity:0;}
.sps-burger{display:none;}

.sps-pagetitle{max-width:1180px;margin:26px auto 14px;padding:0 20px;
  font-size:2rem;line-height:1.2;color:#1d3557;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}

main{padding:0 20px 70px;}
body{margin:0;background:#eef1f3;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}

.sps-foot{background:#1d3557;color:#cfd9e3;padding:40px 20px 24px;}
.sps-foot-inner{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:28px;}
.sps-foot-inner>div{flex:1 1 260px;line-height:1.9;}
.sps-foot strong{color:#fff;display:inline-block;margin-bottom:6px;}
.sps-foot a{color:#e9c46a;text-decoration:none;}
.sps-foot a:hover{text-decoration:underline;}
.sps-copy{max-width:1180px;margin:26px auto 0;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);color:#94a7ba;font-size:.9rem;}

@media (max-width:768px){
  .sps-nav{padding:10px 14px;gap:10px;}
  .sps-brand img{height:46px;}
  .sps-nav-cta{order:1;margin-left:auto;padding:9px 13px;font-size:.9rem;}
  /* the button */
  .sps-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:9px;box-sizing:border-box;cursor:pointer;
    border:2px solid #1d3557;border-radius:8px;flex:0 0 auto;order:2;}
  .sps-burger span{display:block;height:3px;background:#1d3557;border-radius:2px;
    transition:transform .2s ease,opacity .2s ease;}
  /* the panel, closed by default */
  .sps-nav nav{order:9;width:100%;margin-left:0;display:none;
    flex-direction:column;gap:0;}
  .sps-menu-chk:checked ~ nav{display:flex;max-height:72vh;overflow-y:auto;}
  .sps-nav nav a{padding:14px 4px;font-size:1.02rem;
    border-bottom:1px solid #e7ecf1;}
  .sps-nav nav a:last-child{border-bottom:none;}
  .sps-nav nav a[aria-current="page"]{color:#21867a;
    border-bottom:1px solid #e7ecf1;}
  /* open state: the bars become an X */
  .sps-menu-chk:checked ~ .sps-burger span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .sps-menu-chk:checked ~ .sps-burger span:nth-child(2){opacity:0;}
  .sps-menu-chk:checked ~ .sps-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
  .sps-menu-chk:focus-visible ~ .sps-burger{outline:3px solid #2a9d8f;outline-offset:2px;}
  .sps-pagetitle{font-size:1.55rem;margin:20px auto 12px;padding:0 16px;}
  main{padding:0 16px 80px;}
}

/* =========================================================
   HOMEPAGE FEATURE BLOCKS
   ========================================================= */

/* big image-backed service split */
.sps .sps-split{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 40px;}
.sps .sps-split>a{flex:1 1 420px;min-height:300px;border-radius:14px;overflow:hidden;
  position:relative;display:flex;align-items:flex-end;text-decoration:none;
  background:#1d3557 center/cover no-repeat;transition:transform .18s ease;}
.sps .sps-split>a:hover{transform:translateY(-3px);}
.sps .sps-split>a::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(29,53,87,.10) 35%,rgba(29,53,87,.88) 100%);}
.sps .sps-split .sps-split-txt{position:relative;padding:24px;color:#fff;}
.sps .sps-split h3{color:#fff;font-size:1.5rem;margin:0 0 6px;font-weight:800;}
.sps .sps-split p{color:#dbe4ec;margin:0 0 10px;}
.sps .sps-split .sps-more{color:#e9c46a;font-weight:700;}

/* which do you need: two honest columns, stacks on mobile */
.sps .sps-compare{display:flex;flex-wrap:wrap;gap:16px;}
.sps .sps-compare>div{flex:1 1 340px;background:#fff;border:1px solid #dfe5ea;
  border-radius:12px;padding:22px;min-width:0;}
.sps .sps-compare h3{margin:0 0 4px;font-size:1.2rem;color:#1d3557;}
.sps .sps-compare .sps-when{display:inline-block;background:#eaf5f3;color:#21867a;
  font-weight:700;font-size:.82rem;padding:5px 12px;border-radius:999px;margin:0 0 12px;}
.sps .sps-compare ul{list-style:none!important;padding-left:0!important;margin:0;}
.sps .sps-compare li{position:relative;padding:7px 0 7px 26px;color:#4a5a68;
  list-style:none!important;overflow-wrap:break-word;}
.sps .sps-compare li::marker{content:""!important;}
.sps .sps-compare li::before{content:"\2713";position:absolute;left:0;top:7px;
  color:#21867a;font-weight:800;}

/* season band */
.sps .sps-season{display:flex;flex-wrap:wrap;gap:14px;margin:0;}
.sps .sps-season>div{flex:1 1 240px;background:#1d3557;color:#cfd9e3;border-radius:12px;
  padding:20px;min-width:0;}
.sps .sps-season h3{color:#e9c46a;margin:0 0 6px;font-size:1.05rem;}
.sps .sps-season p{margin:0;font-size:.95rem;}

@media (max-width:640px){
  .sps .sps-split>a{min-height:230px;flex-basis:100%;}
  .sps .sps-split h3{font-size:1.25rem;}
  .sps .sps-compare>div,.sps .sps-season>div{flex-basis:100%;}
}

/* =========================================================
   REFERENCE LAYOUT  (sarasotapaving.com rhythm, our stack)
   Full-bleed bands break out of the 1180px wrapper with the
   50vw trick, no JS, no grid.
   ========================================================= */

/* --- hero: full-bleed, big uppercase title with accent rules --- */
.sps .sps-hero-video{border-radius:0;margin:0 0 0 calc(50% - 50vw);width:100vw;
  min-height:78vh;max-height:820px;}
.sps .sps-hero-video .sps-veil{background:linear-gradient(180deg,rgba(20,32,50,.35) 0%,rgba(20,32,50,.72) 100%);}
.sps .sps-hero-video .sps-hero-inner{padding:72px 24px;max-width:900px;}
.sps .sps-hero-video .sps-h1{display:inline-block;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.05;padding:14px 0;margin:0 0 18px;
  border-top:3px solid #e9c46a;border-bottom:3px solid #e9c46a;}
.sps .sps-hero-video p{font-size:1.15rem;max-width:640px;}
.sps .sps-hero-video .sps-btn{min-width:210px;text-transform:uppercase;letter-spacing:.08em;
  font-size:.95rem;padding:16px 28px;}
.sps .sps-hero-video .sps-btn.ghost{background:rgba(29,53,87,.55);border-color:#fff;}
.sps .sps-kicker{background:transparent;border:1px solid rgba(255,255,255,.6);}

/* --- full-width bands --- */
.sps .sps-band{margin:0 0 0 calc(50% - 50vw);width:100vw;padding:64px 20px;}
.sps .sps-band>.sps-inner{max-width:1180px;margin:0 auto;}
.sps .sps-band.white{background:#fff;}
.sps .sps-band.grey{background:#f3f5f7;}
.sps .sps-band.navy{background:#1d3557 center/cover no-repeat;color:#fff;position:relative;}
.sps .sps-band.navy::before{content:"";position:absolute;inset:0;background:rgba(29,53,87,.88);}
.sps .sps-band.navy>.sps-inner{position:relative;}
.sps .sps-band.navy h2,.sps .sps-band.navy p{color:#fff;}
.sps .sps-band.navy h2{border-left-color:#e9c46a;}
.sps .sps-band.dark{background:#1b2733;color:#cfd9e3;}
.sps .sps-band.dark h2,.sps .sps-band.dark h3{color:#fff;}
.sps .sps-band h2.center{border-left:0;padding-left:0;text-align:center;font-size:2rem;
  text-transform:uppercase;letter-spacing:.04em;}
.sps .sps-band h2.center::after{content:"";display:block;width:70px;height:3px;background:#e9c46a;
  margin:12px auto 0;}
.sps .sps-lede{text-align:center;max-width:760px;margin:0 auto 34px;font-size:1.08rem;}

/* --- image service cards on the navy band --- */
.sps .sps-svc{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;}
.sps .sps-svc>a{flex:1 1 300px;max-width:380px;background:#fff;border-radius:12px;overflow:hidden;
  text-decoration:none;color:#1d3557;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .18s;}
.sps .sps-svc>a:hover{transform:translateY(-4px);}
.sps .sps-svc img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.sps .sps-svc .sps-svc-txt{padding:18px 20px 22px;}
.sps .sps-svc h3{margin:0 0 6px;font-size:1.25rem;color:#1d3557;text-transform:uppercase;letter-spacing:.03em;}
.sps .sps-svc p{margin:0 0 10px;color:#4a5a68;}
.sps .sps-svc .sps-more{color:#21867a;font-weight:700;}

/* --- about block with two buttons, matches their white section --- */
.sps .sps-about{text-align:center;max-width:820px;margin:0 auto;}
.sps .sps-about h2{border-left:0;padding-left:0;font-size:2rem;}
.sps .sps-about .sps-tag{color:#21867a;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.85rem;display:block;margin-bottom:8px;}
.sps .sps-about .sps-btns{margin-top:22px;}
.sps .sps-btn.outline{background:transparent;color:#1d3557;border:2px solid #1d3557;}
.sps .sps-btn.outline:hover{background:#1d3557;color:#fff;}

/* --- gallery on the grey band, 3 across like theirs --- */
.sps .sps-band .sps-gallery .sps-shot{box-shadow:0 4px 14px rgba(0,0,0,.08);}

/* --- dark CTA band replaces the boxed CTA --- */
.sps .sps-band.dark .sps-cta{background:transparent;padding:0;margin:0;border-radius:0;}

/* the shell page title is redundant on the homepage, hero carries it */
.sps-home .sps-pagetitle{position:absolute;left:-9999px;}
.sps-home main{padding-top:0;}

@media (max-width:768px){
  .sps .sps-hero-video{min-height:66vh;}
  .sps .sps-hero-video .sps-hero-inner{padding:48px 18px;}
  .sps .sps-band{padding:44px 16px;}
  .sps .sps-band h2.center{font-size:1.5rem;}
  .sps .sps-svc>a{max-width:100%;}
}

/* =========================================================
   GALLERY PAGE  (CSS-only filter + lightbox, no JS)
   ========================================================= */
.sps .sps-gf{position:absolute;opacity:0;pointer-events:none;}
.sps .sps-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 26px;}
.sps .sps-tabs label{cursor:pointer;border:2px solid #1d3557;color:#1d3557;font-weight:700;
  padding:10px 20px;border-radius:999px;user-select:none;min-height:44px;display:flex;align-items:center;gap:8px;}
.sps .sps-tabs label span{background:#e9c46a;color:#1d3557;font-size:.78rem;padding:2px 8px;border-radius:999px;}
.sps #gf-all:checked ~ .sps-tabs label[for="gf-all"],
.sps #gf-pav:checked ~ .sps-tabs label[for="gf-pav"],
.sps #gf-seal:checked ~ .sps-tabs label[for="gf-seal"]{background:#1d3557;color:#fff;}
.sps #gf-pav:checked ~ .sps-mosaic .seal{display:none;}
.sps #gf-seal:checked ~ .sps-mosaic .pav{display:none;}

/* masonry via CSS columns: not grid, survives every validator we have met */
.sps .sps-mosaic{column-count:3;column-gap:14px;}
.sps .sps-tile{display:block;break-inside:avoid;margin:0 0 14px;position:relative;border-radius:12px;
  overflow:hidden;background:#1d3557;box-shadow:0 6px 18px rgba(0,0,0,.12);}
.sps .sps-tile img{width:100%;display:block;transition:transform .35s ease;}
.sps .sps-tile:hover img{transform:scale(1.05);}
.sps .sps-tile-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;color:#fff;font-size:.9rem;
  background:linear-gradient(180deg,rgba(29,53,87,0) 0%,rgba(29,53,87,.92) 100%);
  transform:translateY(100%);transition:transform .3s ease;}
.sps .sps-tile:hover .sps-tile-cap{transform:translateY(0);}
.sps .sps-tile-cat{display:block;color:#e9c46a;font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;}

/* lightbox */
.sps .sps-lb{display:none;position:fixed;inset:0;z-index:10000;background:rgba(20,32,50,.95);
  align-items:center;justify-content:center;padding:60px 70px;}
.sps .sps-lb:target{display:flex;}
.sps .sps-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.sps .sps-lb-close{position:absolute;top:14px;right:22px;color:#fff;font-size:2.6rem;line-height:1;text-decoration:none;}
.sps .sps-lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:3.4rem;line-height:1;
  text-decoration:none;padding:10px 16px;opacity:.85;}
.sps .sps-lb-nav.prev{left:10px;}
.sps .sps-lb-nav.next{right:10px;}
.sps .sps-lb-nav:hover,.sps .sps-lb-close:hover{color:#e9c46a;opacity:1;}
.sps .sps-lb-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#cfd9e3;margin:0;font-size:.95rem;}

@media (max-width:900px){ .sps .sps-mosaic{column-count:2;} }
@media (max-width:560px){
  .sps .sps-mosaic{column-count:1;}
  .sps .sps-tile-cap{transform:none;padding-top:26px;}
  .sps .sps-lb{padding:56px 8px 60px;}
  .sps .sps-lb-nav{font-size:2.6rem;padding:8px 6px;}
  .sps .sps-tabs label{flex:1 1 100%;justify-content:center;}
}

/* =========================================================
   FORMS  (Netlify Forms, plain HTML, no JS)
   ========================================================= */
.sps .sps-form{display:flex;flex-direction:column;gap:14px;}
.sps .sps-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:#1d3557;font-size:.95rem;}
.sps .sps-form input,.sps .sps-form select,.sps .sps-form textarea{
  font:inherit;font-weight:400;color:#1d3557;background:#fff;border:2px solid #dfe5ea;border-radius:10px;
  padding:13px 14px;min-height:48px;width:100%;}
.sps .sps-form textarea{min-height:120px;resize:vertical;}
.sps .sps-form input:focus,.sps .sps-form select:focus,.sps .sps-form textarea:focus{
  outline:none;border-color:#21867a;box-shadow:0 0 0 3px rgba(42,157,143,.2);}
.sps .sps-form button{align-self:flex-start;border:0;cursor:pointer;font:inherit;font-weight:700;min-height:52px;}
.sps .sps-form-note{margin:0;color:#4a5a68;font-size:.88rem;}
.sps .sps-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}

/* contact page: form + details side by side */
.sps .sps-contact{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;}
.sps .sps-form-wrap{flex:1 1 480px;background:#fff;border:1px solid #dfe5ea;border-radius:14px;padding:26px;}
.sps .sps-form-wrap h2,.sps .sps-contact-side h2{font-size:1.4rem;margin:0 0 16px;border-left:5px solid #e9c46a;padding-left:12px;}
.sps .sps-contact-side{flex:1 1 320px;}
.sps .sps-bigphone{margin:0 0 16px;}
.sps .sps-bigphone a{font-size:1.9rem;font-weight:800;color:#1d3557;text-decoration:none;}
.sps ul.sps-info.dark-on-light>li{color:#4a5a68;flex-basis:100%;}
.sps ul.sps-info.dark-on-light strong{color:#1d3557;}
.sps .sps-map{border-radius:12px;overflow:hidden;border:1px solid #dfe5ea;margin-top:18px;}
.sps .sps-map iframe{display:block;width:100%;height:260px;border:0;}

/* homepage CTA band: form on the left, details on the right */
.sps .sps-cta-split{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;}
.sps .sps-cta-split .sps-form-wrap{flex:1 1 460px;}
.sps .sps-cta-split .sps-cta-side{flex:1 1 300px;}
.sps .sps-cta-split .sps-form-wrap h2{color:#1d3557;}
@media (max-width:640px){
  .sps .sps-form button{align-self:stretch;}
  .sps .sps-form-wrap{padding:18px;}
}

/* hero titles are real h1s on every page; kill UA margins so nothing shifts */
.sps .sps-hero h1.sps-h1,.sps .sps-hero-video h1.sps-h1{margin-top:0;}

/* related-services strip on service pages */
.sps .sps-related h3 a{color:#1d3557;text-decoration:none;}
.sps .sps-related h3 a:hover{color:#21867a;text-decoration:underline;}
.sps .sps-compare h3 a{color:#1d3557;text-decoration:none;border-bottom:2px solid #e9c46a;}