/* ===========================================================
   services.html: page-scoped styles
   The whole page scales linearly with the viewport, like the
   source: --px is one "design pixel" (1px at 1440 / 768 / 412).
   =========================================================== */

main.p-services{
  --px:0.2427vw;                 /* root 3.8835vw / 16 */
  color:var(--teal);
  overflow-x:clip;               /* contains the full-bleed hover bar */
  position:relative;
}
@media (min-width:640px){  main.p-services{--px:0.130208vw} }   /* root 2.08333vw / 16 */
@media (min-width:1024px){ main.p-services{--px:0.0694444vw} }  /* root 1.11111vw / 16 */

main.p-services .sv-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:calc(10*var(--px));
}
@media (min-width:640px){  main.p-services .sv-grid{column-gap:calc(12.5*var(--px))} }
@media (min-width:1024px){ main.p-services .sv-grid{grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:calc(15*var(--px))} }

main.p-services .sv-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}

main.p-services canvas[data-dither]{display:block; width:100%; height:100%; image-rendering:pixelated}

/* mono body copy (source .text: 12/1.33, uppercase) */
main.p-services .sv-txt{
  font-family:var(--mono);
  font-size:calc(12*var(--px));
  line-height:1.33;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* label rows: 12/1 mono, space-between */
main.p-services .sv-lab{display:flex; justify-content:space-between; align-items:flex-start}
main.p-services .sv-lab .mono{font-size:calc(12*var(--px)); line-height:1}

/* display type */
main.p-services .sv-title{font-weight:500; letter-spacing:0; font-size:calc(52*var(--px)); line-height:1; color:var(--paper)}
main.p-services .sv-title span{display:block}
@media (min-width:1024px){
  main.p-services .sv-title{font-size:calc(160*var(--px)); line-height:.9375}
}

/* ===========================================================
   1 · HERO
   =========================================================== */
main.p-services .sv-hero{
  position:relative;
  min-height:100svh;
  align-content:end;
  padding:0 calc(15*var(--px)) calc(235*var(--px));
}
/* the dither paints half its pixels in --paper, so paper type on the raw
   canvas is unreadable. The canvas is laid over a --teal-deep ground at 55%
   and a flat teal veil sits on top: the lightest possible pixel behind the
   titles renders as rgb(64,105,102), which is 5.00:1 against --paper. */
main.p-services .sv-hero-img{position:absolute; inset:0; overflow:hidden; background:var(--teal-deep)}
main.p-services .sv-hero-img canvas{opacity:.55}
main.p-services .sv-veil{position:absolute; inset:0; background:rgba(7,64,61,.55)}
main.p-services .sv-title{position:relative; z-index:1}
main.p-services .sv-title-1{grid-column:2/-1; grid-row:1; text-align:right}
main.p-services .sv-title-2{grid-column:1/span 6; grid-row:2; margin-top:calc(90*var(--px))}

@media (min-width:1024px){
  main.p-services .sv-hero{
    padding-bottom:calc(42*var(--px));
    grid-template-rows:calc(511.984*var(--px)) calc(339.984*var(--px));
  }
  main.p-services .sv-title-1{grid-column:5/-1; margin-top:calc(212*var(--px))}
  main.p-services .sv-title-2{grid-column:1/span 8; margin-top:calc(40*var(--px))}
}

/* ===========================================================
   2 · INTRO (colored band)
   =========================================================== */
main.p-services .sv-intro{
  position:relative;
  background:var(--teal);
  color:var(--paper);
  align-content:start;
  overflow-x:clip;
  padding:calc(20*var(--px)) calc(15*var(--px)) calc(334*var(--px));
}
@media (min-width:640px){ main.p-services .sv-intro{padding-bottom:calc(214*var(--px))} }

main.p-services .sv-intro .sv-lab{grid-column:1/-1}
main.p-services .sv-lead{
  grid-column:1/-1;
  margin-top:calc(30*var(--px));
  font-size:calc(22*var(--px));
  line-height:1.1;
  font-weight:400;
}
/* the first-line indent is a spacer, so SplitText lines do not inherit it */
main.p-services .sv-indent{display:inline-block; width:calc(90*var(--px)); height:1px}
@media (min-width:1024px){
  main.p-services .sv-lead{
    grid-column:6/-2;
    margin-top:calc(100*var(--px));
    font-size:calc(30*var(--px));
  }
  main.p-services .sv-indent{width:8.33vw}
}

main.p-services .sv-stairs{
  position:absolute; left:0; bottom:-1px; width:100%;
  padding:0 calc(15*var(--px));
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:calc(10*var(--px));
  grid-template-rows:repeat(3,calc(130*var(--px)));
  pointer-events:none;
}
main.p-services .sv-stair{
  grid-column:1/-1;
  height:calc(130*var(--px));
  margin-left:calc(-15*var(--px));
  background:var(--paper);
  transform-origin:left center;
}
main.p-services .sv-stair:nth-child(1){width:calc(33.3333% + 30*var(--px))}
main.p-services .sv-stair:nth-child(2){width:calc(66.6667% + 30*var(--px))}
main.p-services .sv-stair:nth-child(3){width:calc(100% + 30*var(--px))}
@media (min-width:640px){ main.p-services .sv-stairs{column-gap:calc(12.5*var(--px))} }
@media (min-width:1024px){
  main.p-services .sv-stairs{grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:calc(15*var(--px)); grid-template-rows:repeat(3,calc(140*var(--px)))}
  main.p-services .sv-stair{grid-column:1/5; height:calc(140*var(--px))}
  main.p-services .sv-stair:nth-child(1){width:calc(33.3333% + 15*var(--px))}
  main.p-services .sv-stair:nth-child(2){width:calc(66.6667% + 15*var(--px))}
  main.p-services .sv-stair:nth-child(3){width:calc(100% + 15*var(--px))}
}

/* ===========================================================
   3a · SERVICES SHOWCASE
   =========================================================== */
main.p-services .sv-services{padding:calc(25*var(--px)) calc(15*var(--px)) 0}
@media (min-width:1024px){ main.p-services .sv-services{padding-top:calc(110*var(--px))} }

main.p-services .sv-show{
  position:relative;
  border:1px solid var(--teal);
  padding-bottom:calc(48*var(--px));
}
main.p-services .sv-lab-2{
  grid-column:1/-1;
  border-top:1px solid var(--teal);
  padding-top:calc(20*var(--px));
}
main.p-services .sv-band{display:none}

main.p-services .sv-p1{grid-column:1/-1; margin-top:calc(50*var(--px))}
main.p-services .sv-p2{grid-column:1/-1; margin-top:calc(24*var(--px))}
main.p-services .sv-mimg{grid-column:1/-1; margin-top:calc(22*var(--px)); aspect-ratio:380/500; overflow:hidden}

@media (min-width:1024px){
  main.p-services .sv-show{
    border:none;
    padding-bottom:0;
    grid-template-rows:minmax(calc(252.812*var(--px)),auto) 0 minmax(calc(259.812*var(--px)),auto) auto;
  }
  main.p-services .sv-lab-2{position:absolute; top:0; left:0; width:100%}
  main.p-services .sv-mimg{display:none}

  main.p-services .sv-p1{
    grid-column:5/-1; grid-row:1;
    border-left:1px solid var(--teal);
    padding:calc(85*var(--px)) 0 calc(82*var(--px));
    margin:0 0 calc(38*var(--px));
  }
  main.p-services .sv-p1 .sv-txt{margin-left:3.22vw; width:calc(340*var(--px))}
  main.p-services .sv-p2{
    grid-column:5/-1; grid-row:3;
    border-left:1px solid var(--teal);
    padding:calc(110*var(--px)) 0 calc(64*var(--px));
    margin:calc(38*var(--px)) 0 0;
  }
  main.p-services .sv-p2 .sv-txt{margin-left:32.98vw; width:calc(340*var(--px))}

  main.p-services .sv-band{
    display:grid;
    grid-column:1/-1; grid-row:4;
    grid-template-columns:subgrid;
    border-top:1px solid var(--teal);
    border-bottom:1px solid var(--teal);
  }
  main.p-services .sv-band-in{
    position:relative;
    grid-column:3/-1;
    display:grid;
    grid-template-columns:subgrid;
    border-left:1px solid var(--teal);
  }
  main.p-services .sv-img{
    grid-column:2/span 6;
    margin:calc(100*var(--px)) 0 calc(115*var(--px));
    aspect-ratio:698/738;
    overflow:hidden;
  }
}

/* ===========================================================
   3b · SERVICES LIST
   =========================================================== */
main.p-services .sv-list{
  position:relative;
  list-style:none;
  margin:0;
  padding:0 0 calc(100*var(--px));
  border-top:1px solid var(--teal);
}
main.p-services .sv-hl{
  position:absolute; top:0; left:0;
  width:100%; height:1px;
  z-index:0;
  background:var(--teal);
  transform:scaleX(1.03) scaleY(0);
  transform-origin:center top;
  pointer-events:none;
}
main.p-services .sv-row{
  position:relative;
  z-index:1;
  display:grid;
  grid-column:1/-1;
  grid-template-columns:subgrid;
  padding:calc(20*var(--px)) 0 calc(34*var(--px));
}
main.p-services .sv-row + .sv-row{border-top:1px solid var(--teal)}

main.p-services .sv-num{grid-column:-2/-1; grid-row:1; justify-self:end; font-size:calc(30*var(--px)); line-height:1; font-weight:500}
main.p-services .sv-thumb{display:none}
main.p-services .sv-col{grid-column:1/-2; grid-row:1; display:flex; flex-direction:column; align-items:flex-start}
main.p-services .sv-col h3{font-size:calc(30*var(--px)); line-height:1; font-weight:500}
main.p-services .sv-col .sv-more{display:none}
main.p-services .sv-desc{grid-column:1/span 5; margin-top:calc(30*var(--px))}
main.p-services .sv-cta-m{grid-column:1/-1; margin-top:calc(16*var(--px))}

main.p-services .sv-more{
  position:relative;
  display:inline-block;
  overflow:hidden;
  background:var(--paper);
  color:var(--teal);
  border:1px solid var(--paper);
  font-family:var(--mono);
  font-size:calc(11*var(--px));
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
}
main.p-services .sv-more-a{display:block; padding:calc(21*var(--px))}
main.p-services .sv-more-b{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--teal);
  color:var(--paper);
  transform:translateY(101%) scaleX(.5);
  transform-origin:center bottom;
}

@media (min-width:1024px){
  main.p-services .sv-list{border-top:none}
  main.p-services .sv-row{
    grid-row:var(--row);
    grid-template-rows:calc(252*var(--px)) 0;
    padding:calc(15*var(--px)) 0 calc(36*var(--px));
  }
  main.p-services .sv-num{grid-column:1/2; justify-self:start}
  main.p-services .sv-thumb{display:block; grid-column:2/5; grid-row:1/span 2; position:relative; overflow:hidden; opacity:1; align-self:stretch}
  main.p-services .sv-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
  main.p-services .sv-col{grid-column:5/9}
  main.p-services .sv-col .sv-more{display:inline-block; margin-top:calc(44*var(--px))}
  main.p-services .sv-desc{grid-column:9/-2; grid-row:1; margin-top:0}
  main.p-services .sv-cta-m{display:none}
}

/* hover pipeline, desktop pointers only (source gates it the same way) */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  main.p-services .sv-row{cursor:pointer}
  main.p-services .sv-num,
  main.p-services .sv-col h3{transition:color .3s cubic-bezier(.4,0,.2,1)}
  main.p-services .sv-desc{transition:color .5s cubic-bezier(.4,0,.2,1)}
  main.p-services .sv-row:hover .sv-num,
  main.p-services .sv-row:hover h3,
  main.p-services .sv-row:hover .sv-desc{color:var(--paper)}
  main.p-services .sv-col .sv-more{opacity:0; transition:opacity .2s cubic-bezier(.4,0,.2,1)}
  main.p-services .sv-row:hover .sv-col .sv-more,
  main.p-services .sv-col .sv-more:focus-visible{opacity:1}

}

@media (prefers-reduced-motion:reduce){
  main.p-services .sv-stair{transform:none}
  main.p-services .sv-more-b{transform:translateY(101%)}
  main.p-services *{transition-duration:.01ms !important}
}

@media (max-width:640px){
  main.p-services .sv-hero-img img{object-position:38% 50%}
  main.p-services .sv-show{padding:1rem}
  main.p-services .sv-lab-2{position:static; margin-bottom:.8rem}
  main.p-services .sv-intro{padding-bottom:calc(60*var(--px))}
}