/* VAV Services refinement — approved objects unchanged; no raster/UI additions.
   Current sticky sequence is preserved. This stylesheet is loaded AFTER older review layers. */
@media (min-width:901px){
  /* 1. One visual column: heading, description, then a tighter service list. */
  .services-section[data-vav-sequence] .services-stage{
    isolation:isolate!important;
    grid-template-columns:40% 60%!important;
    align-items:start!important;
    overflow:hidden!important;
  }
  .services-section[data-vav-sequence] .services-stage>.section-head{
    position:absolute!important;
    z-index:8!important;
    display:block!important;
    left:max(30px,calc((100vw - var(--vav-max))/2))!important;
    right:auto!important;
    top:clamp(124px,15.2svh,168px)!important;
    width:clamp(335px,37vw,600px)!important;
    max-width:calc(100% - 55%)!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    pointer-events:none;
  }
  .services-section[data-vav-sequence] .services-stage>.section-head .eyebrow{
    display:none!important;
  }
  .services-section[data-vav-sequence] .services-stage>.section-head h2{
    display:block!important;
    max-width:none!important;
    margin:0!important;
    font-family:"Actay Wide","Helvetica Neue",Arial,sans-serif!important;
    font-size:clamp(57px,4.65vw,78px)!important;
    line-height:.94!important;
    letter-spacing:-.061em!important;
    font-weight:780!important;
    color:#090909!important;
    text-align:left!important;
  }
  .services-section[data-vav-sequence] .services-stage>.section-head>p:last-child{
    display:block!important;
    max-width:360px!important;
    margin:19px 0 0!important;
    font-size:14px!important;
    line-height:1.48!important;
    color:#62625d!important;
    text-align:left!important;
  }

  /* 2. No support platform: keep approved items floating above the original knit. */
  .services-section[data-vav-sequence] .services-media{
    display:block!important;
    position:absolute!important;
    z-index:4!important;
    left:39%!important;
    right:0!important;
    top:5%!important;
    bottom:4%!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .services-section[data-vav-sequence] .services-media .sequence-service-layer,
  .services-section[data-vav-sequence] .services-media>img{
    left:57%!important;
    top:47%!important;
    width:min(53.5vw,780px)!important;
    height:72%!important;
    max-width:none!important;
    object-fit:contain!important;
    transform:translate(-50%,-50%)!important;
    filter:drop-shadow(0 19px 27px rgba(0,0,0,.105))!important;
  }
  /* 3. Compact sewn timeline; the active dot reuses the real satin-thread canvas. */
  .services-section[data-vav-sequence] .services-list{
    position:absolute!important;
    z-index:9!important;
    left:max(30px,calc((100vw - var(--vav-max))/2))!important;
    right:auto!important;
    top:49svh!important;
    width:clamp(335px,34vw,470px)!important;
    max-width:calc(100% - 58%)!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:0!important;
    transform:none!important;
    background:none!important;
    border:0!important;
  }
  .services-section[data-vav-sequence] .services-list::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    left:19px!important;
    top:31px!important;
    bottom:31px!important;
    width:1px!important;
    height:auto!important;
    background:repeating-linear-gradient(to bottom,rgba(21,21,20,.39) 0 3px,transparent 3px 7px)!important;
    opacity:.67!important;
    pointer-events:none!important;
  }
  .services-section[data-vav-sequence] .services-list article,
  .services-section[data-vav-sequence] .services-list article.is-active{
    position:relative!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex:0 0 58px!important;
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:20px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    opacity:1!important;
    transform:none!important;
    background:transparent!important;
    cursor:pointer!important;
  }
  .services-section[data-vav-sequence] .services-list article>span,
  .services-section[data-vav-sequence] .services-list article:not(.is-active)>span,
  .services-section[data-vav-sequence] .services-list article.is-active>span{
    display:grid!important;
    place-items:center!important;
    position:relative!important;
    z-index:2!important;
    left:auto!important;
    top:auto!important;
    flex:0 0 40px!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    transform:none!important;
    border-radius:50%!important;
    box-shadow:none!important;
    color:transparent!important;
  }
  .services-section[data-vav-sequence] .services-list article:not(.is-active)>span{
    border:1px solid rgba(18,18,17,.59)!important;
    background:rgba(245,243,237,.53)!important;
  }
  .services-section[data-vav-sequence] .services-list article.is-active>span{
    border:0!important;
    background:#080808!important;
    box-shadow:inset 0 .7px 1.2px rgba(255,255,255,.25),
      0 1px 1px rgba(0,0,0,.18)!important;
  }
  .services-section[data-vav-sequence] .service-stitch-canvas{
    display:none!important;
  }
  .services-section[data-vav-sequence] .services-list article.is-active .service-stitch-canvas{
    display:block!important;
    position:absolute!important;
    z-index:2!important;
    width:42px!important;
    height:42px!important;
    left:50%!important;
    top:50%!important;
    inset:auto!important;
    transform:translate(-50%,-50%)!important;
    opacity:1!important;
  }
  .services-section[data-vav-sequence] .services-list article h3,
  .services-section[data-vav-sequence] .services-list article.is-active h3{
    display:block!important;
    position:relative!important;
    width:auto!important;
    max-width:390px!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    font-size:clamp(19px,1.42vw,23px)!important;
    line-height:1.08!important;
    letter-spacing:-.043em!important;
    white-space:normal!important;
    opacity:.62!important;
    color:#171717!important;
    text-align:left!important;
    transition:opacity .18s ease!important;
  }
  .services-section[data-vav-sequence] .services-list article.is-active h3{
    opacity:1!important;
    font-weight:740!important;
  }
  .services-section[data-vav-sequence] .services-list article:hover h3,
  .services-section[data-vav-sequence] .services-list article:focus-visible h3{
    opacity:1!important;
  }
  .services-section[data-vav-sequence] .services-list article:focus-visible{
    outline:2px solid rgba(0,0,0,.68)!important;
    outline-offset:4px!important;
    border-radius:4px!important;
  }
  /* Existing step descriptions are carried by the semantics, not floating plaques. */
  .services-section[data-vav-sequence] .services-list article p{display:none!important}
}
@media (min-width:901px) and (max-width:1199px){
  .services-section[data-vav-sequence] .services-stage>.section-head{
    top:clamp(112px,14svh,136px)!important;
    width:37%!important;
  }
  .services-section[data-vav-sequence] .services-stage>.section-head h2{
    font-size:clamp(45px,4.65vw,56px)!important;
  }
  .services-section[data-vav-sequence] .services-stage>.section-head>p:last-child{
    font-size:12.5px!important;max-width:290px!important;
  }
  .services-section[data-vav-sequence] .services-list{
    top:46svh!important;width:38%!important;
  }
  .services-section[data-vav-sequence] .services-list article,
  .services-section[data-vav-sequence] .services-list article.is-active{
    flex-basis:56px!important;height:56px!important;min-height:56px!important;
  }
  .services-section[data-vav-sequence] .services-list article h3,
  .services-section[data-vav-sequence] .services-list article.is-active h3{font-size:18px!important}
}
@media (min-width:901px) and (max-height:730px){
  .services-section[data-vav-sequence] .services-stage>.section-head{top:100px!important}
  .services-section[data-vav-sequence] .services-stage>.section-head h2{
    font-size:clamp(43px,4vw,64px)!important;
  }
  .services-section[data-vav-sequence] .services-stage>.section-head>p:last-child{
    margin-top:12px!important;font-size:12px!important;
  }
  .services-section[data-vav-sequence] .services-list{top:47svh!important}
  .services-section[data-vav-sequence] .services-list article,
  .services-section[data-vav-sequence] .services-list article.is-active{
    height:54px!important;min-height:54px!important;flex-basis:54px!important;
  }
}
/* Same visual grammar as hero rest-thread: black satin micro-strands, crisp silhouettes.
   Pure CSS — no extra image, canvas animation or compositing library. */
@supports((-webkit-background-clip:text) or (background-clip:text)){
  .services-section[data-vav-sequence] .services-stage>.section-head h2{
    background-image:repeating-linear-gradient(96deg,
      #0c0c0c 0px,#080808 .7px,#242424 1.2px,#080808 2.1px,#101010 3px)!important;
    background-clip:text!important;
    -webkit-background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    text-shadow:0 .7px .45px rgba(0,0,0,.16)!important;
    filter:drop-shadow(0 .45px .3px rgba(0,0,0,.13));
  }
}
@media (max-width:900px){
  /* Mobile is its own approved RF; keep stacked pinned layout and horizontal selector. */
  .services-section[data-vav-sequence] .services-stage>.section-head h2{
    overflow:visible!important;
    letter-spacing:-.056em!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .services-section .services-list article h3{transition:none!important}
}

/* Approved scale recovery: later mobile overrides shrank inactive stitches to 10px.
   Preserve the horizontal selector geometry and the original thread renderer. */
@media(max-width:900px){
  .services-section[data-vav-sequence] .services-list article:not(.is-active)>span{
    width:40px!important; min-width:40px!important;
    height:40px!important; min-height:40px!important;
    border:1px solid rgba(10,10,10,.45)!important;
    background:transparent!important;
  }
  .services-section[data-vav-sequence] .services-list article.is-active>span{
    width:44px!important; min-width:44px!important;
    height:44px!important; min-height:44px!important;
  }
  .services-section[data-vav-sequence] .services-list article.is-active .service-stitch-canvas{
    display:block!important;
    width:46px!important; height:46px!important;
  }
}