/* Blue Star Pool and Spas Services · services.css
   Page layer for /services/ and /es/servicios/. Prefix .sv-. Never redefines base.css. */
.sv-open,.sv-units,.sv-how,.sv-ask{--sv-air:var(--pad);--sv-gap:clamp(3rem,4.6vw,4.2rem)}

/* ---------- ① opening + static index of the 6 services ---------- */
.sv-open{padding-bottom:2rem}
.sv-units--a{padding-top:calc(var(--sv-air) - 2rem)}
.sv-open.jets::before{-webkit-mask-image:linear-gradient(118deg,#000 0%,transparent 38%);mask-image:linear-gradient(118deg,#000 0%,transparent 38%)}
.sv-open-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.4rem,4.4vw,4rem);align-items:end}
.sv-open-title .display{margin-top:1.1rem}
.sv-open-head .lead{justify-self:end;padding-bottom:.3rem;text-wrap:pretty}
.sv-index{margin-top:clamp(2.2rem,3.4vw,3.1rem)}
.sv-index-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.sv-ix{display:flex;align-items:center;gap:.7rem;min-height:62px;padding:.5rem .7rem .5rem 1.2rem;border-radius:999px;border:1.5px solid rgba(var(--navy-rgb),.16);background:var(--white);box-shadow:var(--shadow-sm);color:var(--navy);font-weight:700;font-size:1.02rem;line-height:1.2;transition:background-color .25s,border-color .25s}
.sv-ix:hover{background:var(--aqua);border-color:rgba(var(--blue-rgb),.5)}
.sv-ix-n{flex:none;min-width:1.55em;font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.06em;color:var(--blue)}
.sv-ix .ico{flex:none;width:23px;height:23px;color:var(--blue)}
.sv-ix-t{flex:1;min-width:0}
.sv-ix-go{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--aqua);transition:background-color .25s}
.sv-ix:hover .sv-ix-go{background:var(--cyan)}
.sv-ix-go svg{width:17px;height:17px;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- ② ④ service units: zigzag, photo locked to the copy's rest height ---------- */
.sv-units--b{padding-bottom:3rem}   /* room for the last shadows; .sv-ask takes it back */
.sv-unit{position:relative}
.sv-unit:first-child{margin-top:-44px;padding-top:44px}   /* anchors land with air under the stuck nav, layout unchanged */
.sv-unit + .sv-unit{margin-top:var(--sv-gap);padding-top:var(--sv-gap)}
.sv-unit + .sv-unit::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(var(--navy-rgb),0),rgba(var(--navy-rgb),.16) 14%,rgba(var(--navy-rgb),.16) 86%,rgba(var(--navy-rgb),0))}
.sv-unit-grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);column-gap:clamp(2.4rem,5.2vw,5rem);align-items:start}
.sv-unit--flip .sv-unit-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.14fr)}
.sv-unit--flip .sv-media-col{order:2}
.sv-media-col{position:relative;align-self:stretch;min-height:320px}
.sv-media-col::before{content:"";position:absolute;z-index:0;top:-18px;left:-18px;width:56%;height:62%;border-radius:calc(var(--r) + 8px);background:var(--aqua)}
.sv-unit--flip .sv-media-col::before{left:auto;right:-18px}
.sv-media{position:absolute;inset:0;z-index:1;border-radius:var(--r);overflow:hidden;background:var(--aqua);box-shadow:var(--shadow)}
.sv-media-par{position:absolute;left:0;right:0;top:-6%;bottom:-6%;will-change:transform}
.sv-media-par img{width:100%;height:100%;object-fit:cover}
.sv-bub{position:absolute;z-index:2;top:-64px;left:20px;width:62px;height:58px;pointer-events:none;scale:.85;transform-origin:0 100%}
.sv-unit--flip .sv-bub{left:auto;right:20px;transform-origin:100% 100%}
.sv-bub i{position:absolute;border-radius:50%;border:1.5px solid rgba(var(--blue-rgb),.45);background:rgba(var(--aqua-rgb),.7)}
.sv-bub i:nth-child(1){left:0;bottom:0;width:26px;height:26px}
.sv-bub i:nth-child(2){left:34px;bottom:20px;width:14px;height:14px;border-color:var(--cyan)}
.sv-bub i:nth-child(3){left:20px;bottom:44px;width:9px;height:9px;border-color:rgba(var(--blue-rgb),.36)}
.js .rv.sv-from-l:not(.is-in){transform:translate3d(-44px,0,0)}
.js .rv.sv-from-r:not(.is-in){transform:translate3d(44px,0,0)}

.sv-copy{position:relative;display:flex;flex-direction:column;min-width:0;min-height:clamp(440px,33vw,480px)}
.sv-copy > *{position:relative;z-index:1}
.sv-copy > .sv-ghost{position:absolute;z-index:0;top:-.1em;right:-.02em;font-size:clamp(6.4rem,11.5vw,10.5rem)}
.sv-head{display:flex;align-items:center;gap:.9rem}
.sv-ico{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:var(--navy);color:var(--cyan);box-shadow:var(--shadow-sm)}
.sv-ico .ico{width:28px;height:28px}
.sv-h{margin-top:1.05rem;line-height:1.02}
.sv-pitch{margin-top:.8rem;max-width:44ch;text-wrap:balance}
.sv-inc{margin-top:1.35rem;padding-top:1.25rem;border-top:1px solid rgba(var(--navy-rgb),.13)}
.sv-label{font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.sv-inc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.62rem 1.3rem;margin-top:.95rem}
.sv-inc-list li{position:relative;padding-left:1.8rem;font-size:.97rem;font-weight:500;line-height:1.35;color:rgba(var(--navy-rgb),.92)}
.sv-inc-list li::before{content:"";position:absolute;left:0;top:.09em;width:19px;height:19px;border-radius:50%;background:var(--cyan)}
.sv-inc-list li::after{content:"";position:absolute;left:6.8px;top:calc(.09em + 4.4px);width:5px;height:8.5px;border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(42deg)}

/* accordion (page signature): grid rows from base.css, chevron and level bar are CSS on nodes GSAP never touches */
.sv-acc{margin-top:1.35rem;border-radius:var(--r-sm);border:1.5px solid rgba(var(--navy-rgb),.15);background:var(--white);overflow:hidden}
.sv-acc-item{position:relative}
.sv-acc-item + .sv-acc-item{border-top:1.5px solid rgba(var(--navy-rgb),.1)}
.sv-acc-item::before{content:"";position:absolute;z-index:1;left:0;top:0;bottom:0;width:3px;background:var(--cyan);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease)}
.sv-acc-item.is-open::before{transform:scaleY(1)}
.sv-acc-btn{display:flex;align-items:center;gap:.75rem;width:100%;min-height:56px;padding:.5rem .7rem .5rem 1.05rem;text-align:left;font-weight:700;font-size:1rem;line-height:1.2;color:var(--navy);transition:background-color .25s}
.sv-acc-btn:hover,.sv-acc-item.is-open .sv-acc-btn{background:rgba(var(--aqua-rgb),.6)}
.sv-acc-btn:focus-visible{outline-offset:-5px;border-radius:12px}
.sv-acc-btn .ico{flex:none;width:21px;height:21px;color:var(--blue)}
.sv-acc-t{flex:1;min-width:0}
.sv-acc-plus{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--aqua);transition:background-color .25s,transform .45s var(--ease)}
.sv-acc-plus::before,.sv-acc-plus::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;margin:-1px 0 0 -6.5px;border-radius:2px;background:var(--navy)}
.sv-acc-plus::after{transform:rotate(90deg)}
.sv-acc-item.is-open .sv-acc-plus{background:var(--cyan);transform:rotate(45deg)}
.sv-acc-clip{visibility:hidden;transition:visibility 0s linear .45s}
.sv-acc-item.is-open .sv-acc-clip{visibility:visible;transition-delay:0s}
.sv-acc-body{padding:.2rem 1.05rem 1.15rem;font-size:.97rem;line-height:1.45;color:rgba(var(--navy-rgb),.88)}
.sv-mini{counter-reset:svm;display:grid;gap:.6rem}
.sv-mini li{counter-increment:svm;position:relative;padding-left:2.15rem}
.sv-mini li::before{content:counter(svm);position:absolute;left:0;top:-.08em;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--navy);color:var(--white);font-family:var(--display);font-weight:700;font-size:.78rem;line-height:1}
html:not(.js) .sv-acc .acc-panel{grid-template-rows:1fr}
html:not(.js) .sv-acc-clip{visibility:visible}
html:not(.js) .sv-acc-plus{display:none}
html.acc-measure .sv-acc-clip{display:none}
html.reduced .sv-acc-item::before,html.reduced .sv-acc-plus,html.reduced .sv-acc .acc-panel{transition:none}
.sv-cta{margin-top:auto;padding-top:1.5rem}

@media (min-width:1041px){
  .sv-unit.is-locked .sv-media-col{align-self:start;height:var(--sv-h)}
  /* step titles share one row height so the support lines start level */
  @supports (grid-template-rows:subgrid){
    .sv-how .sv-steps{grid-template-rows:auto auto auto;row-gap:0}
    .sv-how .sv-step{display:grid;grid-template-rows:subgrid;grid-row:span 3}
  }
}

/* ---------- ③ divider «How we work»: navy, full bleed, 4 steps, arrows that draw ---------- */
.sv-how{padding-block:calc(var(--wave-h) + clamp(3.2rem,5vw,4.8rem))}
.sv-how-bg{position:absolute;inset:-12% 0;z-index:0;opacity:.5;will-change:transform}
.sv-how-bg img{width:100%;height:100%;object-fit:cover}
.sv-how-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(1.4rem,4vw,4rem);align-items:end}
.sv-how-title .display{margin-top:1.05rem}
.sv-how-head .lead{justify-self:end;padding-bottom:.3rem;color:rgba(var(--white-rgb),.88)}
.sv-steps{--sv-sg:clamp(1.3rem,2.6vw,2.6rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sv-sg);margin-top:clamp(2.3rem,3.9vw,3.5rem)}
.sv-step{position:relative;min-width:0}
.sv-step-top{display:flex;align-items:center;gap:.8rem}
.sv-step-n{flex:none;font-family:var(--display);font-weight:800;font-size:clamp(4.3rem,7.3vw,6.9rem);line-height:.84;letter-spacing:-.04em;color:var(--cyan);will-change:transform}
.sv-arrow{flex:1 1 0;width:0;min-width:0;height:auto;margin-right:calc(8px - var(--sv-sg));overflow:visible;fill:none;stroke:rgba(var(--cyan-rgb),.78);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sv-step:nth-child(even) .sv-arrow{transform:scaleY(-1)}
.sv-arrow-line{stroke-dasharray:1 1.2}
.js .sv-step .sv-arrow-line{stroke-dashoffset:1.02}
.js .sv-step .sv-arrow-head{opacity:0}
.js .sv-step.is-in .sv-arrow-line{stroke-dashoffset:0;transition:stroke-dashoffset .85s var(--ease) calc(var(--i,0)*90ms + .35s)}
.js .sv-step.is-in .sv-arrow-head{opacity:1;transition:opacity .3s ease calc(var(--i,0)*90ms + .9s)}
html.reduced .sv-step .sv-arrow-line,html.acc-measure .sv-step .sv-arrow-line{stroke-dashoffset:0!important;transition:none!important}
html.reduced .sv-step .sv-arrow-head,html.acc-measure .sv-step .sv-arrow-head{opacity:1!important;transition:none!important}
.sv-step-t{margin-top:1.15rem;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,1.72vw,1.6rem);line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
.sv-step-d{margin-top:.65rem;max-width:30ch;font-size:.98rem;line-height:1.5;color:rgba(var(--white-rgb),.8);text-wrap:pretty}

/* ---------- ⑤ penultimate stage «Not sure what it needs?» ---------- */
.sv-ask{padding-block:calc(var(--sv-air) - 3rem) calc(var(--sv-air) + var(--wave-h)*.5)}
.sv-ask-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(1.4rem,4vw,4rem);padding:clamp(2rem,4.6vw,4.4rem);border-radius:calc(var(--r) + 12px);background:var(--aqua);overflow:clip}
.sv-ask-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(var(--blue-rgb),.2) 1.6px,transparent 2.2px);background-size:34px 34px;-webkit-mask-image:linear-gradient(200deg,transparent 52%,#000 100%);mask-image:linear-gradient(200deg,transparent 52%,#000 100%)}
.sv-ask-copy{position:relative;z-index:2;min-width:0}
.sv-ask-copy .display{margin-top:1.05rem}
.sv-ask-copy .lead{margin-top:1.3rem;max-width:46ch;text-wrap:pretty}
.sv-signs{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}
.sv-ask .sv-signs .chip{background:rgba(var(--white-rgb),.82);border-color:rgba(var(--navy-rgb),.16)}
.sv-ask-copy .btn-row{margin-top:1.9rem}
.sv-ask-art{position:relative;z-index:1;align-self:stretch;min-height:clamp(300px,29vw,400px)}
.sv-tub-wrap{position:absolute;left:8%;top:50%;width:clamp(330px,35vw,500px);margin-top:calc(clamp(330px,35vw,500px)*-.5);rotate:9deg}
.sv-tub{width:100%;height:auto;will-change:transform}
.sv-tub-shell{fill:var(--white);stroke:rgba(var(--navy-rgb),.1);stroke-width:1.5}
.sv-tub-lip{fill:none;stroke:rgba(var(--blue-rgb),.2);stroke-width:1.5}
.sv-tub-water{fill:rgba(var(--cyan-rgb),.34)}
.sv-tub-well{fill:rgba(var(--cyan-rgb),.34)}
.sv-tub-rip{fill:none;stroke:rgba(var(--white-rgb),.85);stroke-width:4;stroke-linecap:round}
.sv-tub-jets circle{fill:var(--white);stroke:rgba(var(--blue-rgb),.42);stroke-width:1.5}
.sv-ask .strip{position:absolute;left:-4%;top:50%;width:clamp(300px,31vw,450px);margin-top:-46px;padding:13px 13px 13px 66px;gap:9px;border-radius:15px;box-shadow:var(--shadow);rotate:-13deg;will-change:transform}
.sv-ask .strip i{border-radius:8px}
.js .sv-ask-art .strip i{opacity:0}
.js .sv-ask-art.is-in .strip i{opacity:1;transition:opacity .5s ease}
.js .sv-ask-art.is-in .strip i:nth-child(1){transition-delay:.55s}
.js .sv-ask-art.is-in .strip i:nth-child(2){transition-delay:.67s}
.js .sv-ask-art.is-in .strip i:nth-child(3){transition-delay:.79s}
.js .sv-ask-art.is-in .strip i:nth-child(4){transition-delay:.91s}
.js .sv-ask-art.is-in .strip i:nth-child(5){transition-delay:1.03s}
.js .sv-ask-art.is-in .strip i:nth-child(6){transition-delay:1.15s}
html.reduced .sv-ask-art .strip i,html.acc-measure .sv-ask-art .strip i{opacity:1!important;transition:none!important}

/* ---------- small laptops: give the copy column more room ---------- */
@media (min-width:1041px) and (max-width:1340px){
  .sv-unit-grid{column-gap:2.6rem}
  .sv-inc-list{gap:.55rem 1rem}
  .sv-inc-list li{font-size:.94rem}
}

/* ---------- tablet: stack splits ---------- */
@media (max-width:1040px){
  .sv-open-head{grid-template-columns:minmax(0,1fr);gap:1.3rem;align-items:start}
  .sv-open-head .lead{justify-self:start;padding-bottom:0}
  .sv-index-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-unit-grid,.sv-unit--flip .sv-unit-grid{grid-template-columns:minmax(0,1fr);row-gap:2rem}
  .sv-unit--flip .sv-media-col{order:0}
  .sv-media-col{aspect-ratio:16/9;min-height:0}
  .sv-copy{min-height:0}
  .js .rv.sv-from-l:not(.is-in),.js .rv.sv-from-r:not(.is-in){transform:translate3d(0,26px,0)}
  .sv-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.4rem}
  .sv-step:nth-child(even) .sv-arrow{display:none}
  .sv-step-n{font-size:clamp(4.3rem,10vw,5.6rem)}
  .sv-step-d{max-width:38ch}
  .sv-ask-panel{grid-template-columns:minmax(0,1fr);gap:1rem;padding-bottom:0}
  .sv-ask-art{min-height:300px}
  .sv-tub-wrap{left:auto;right:-4%;top:34px;margin-top:0;width:400px}
  .sv-ask .strip{left:22%;top:118px;margin-top:0;width:min(400px,62vw)}
}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .sv-index-list{grid-template-columns:minmax(0,1fr);gap:.6rem}
  .sv-ix{min-height:58px}
  .sv-media-col{aspect-ratio:4/3}
  .sv-media-col::before{top:-10px;left:-10px}
  .sv-unit--flip .sv-media-col::before{right:-10px}
  .sv-bub{top:-61px;left:12px;scale:.7}
  .sv-unit--flip .sv-bub{right:12px}
  .sv-copy > .sv-ghost{font-size:5.8rem;top:-.04em}
  .sv-ico{width:50px;height:50px;border-radius:15px}
  .sv-how-head{grid-template-columns:minmax(0,1fr);gap:1.2rem;align-items:start}
  .sv-how-head .lead{justify-self:start;padding-bottom:0}
  .sv-steps{grid-template-columns:minmax(0,1fr);row-gap:0;margin-top:2.2rem}
  .sv-step{display:grid;grid-template-columns:86px minmax(0,1fr);column-gap:.4rem;padding-bottom:1.9rem}
  .sv-step:last-child{padding-bottom:0}
  .sv-step:not(:last-child)::after{content:"";position:absolute;left:30px;top:66px;bottom:8px;border-left:2px dashed rgba(var(--cyan-rgb),.45)}
  .sv-step-top{grid-row:1 / span 2;align-items:flex-start}
  .sv-step-n{font-size:3.5rem;line-height:.9}
  .sv-arrow{display:none}
  .sv-step-t{margin-top:.2rem}
  .sv-step-d{max-width:none}
  .sv-ask-panel{padding:1.7rem 1.35rem 0;border-radius:var(--r)}
  .sv-ask-art{min-height:250px}
  .sv-tub-wrap{right:-16%;top:26px;width:310px}
  .sv-ask .strip{left:0;top:96px;width:274px;padding:9px 9px 9px 40px;gap:6px;border-radius:11px}
  .sv-ask .strip i{border-radius:6px}
}
@media (max-width:560px){
  .sv-inc-list{grid-template-columns:minmax(0,1fr)}
}