/* The services list, new look (draft on ?v=2, 2026-10-18): the language of the portfolio and the blog. Scoped to #main.sv2,
   services_category.blade.php + services-v2.js. Same texts, headings and links as the old page; only the look. */
#main.sv2{--paper:#F9F6F0;--ink:#2D2D2D;--soft:#5E5853;--mute:#9A928B;--line:rgba(45,45,45,.12);--red:#BE2E24;--red-hi:#C8392D;--red-lo:#9A241C;
  --e:cubic-bezier(.25,.1,.25,1);--o:cubic-bezier(.19,1,.22,1);--sv-gut:5vw;--sv-band:58px}
@media (min-width:1200px){#main.sv2{--sv-gut:5.5vw}}
html:has(#main.sv2){scroll-behavior:smooth}
/* the page block clipped its overflow with hidden, which keeps a sticky band from holding: clip does the same without that */
#main.sv2 .service-short{overflow:visible!important;overflow-x:clip!important}

/* the figures: thin numbers between two hairlines */
#main.sv2 .stats-section{border-color:var(--line)!important}
#main.sv2 .stat-label{color:var(--mute);letter-spacing:.14em}

/* ---------- the band: the sections held under the header (as the portfolio filter and the blog sections) ---------- */
#main.sv2 .sv2-band{position:sticky;top:calc(var(--header-h,64px) - 1px);z-index:40;display:flex;align-items:stretch;justify-content:space-between;gap:24px;height:var(--sv-band);margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding:0 var(--sv-gut);
  background:rgba(249,246,240,.9);-webkit-backdrop-filter:saturate(1.15) blur(14px);backdrop-filter:saturate(1.15) blur(14px);border-bottom:1px solid var(--line)}
#main.sv2 .sv2-band__list{display:flex;align-items:stretch;gap:clamp(22px,2.6vw,40px);min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#main.sv2 .sv2-band__list::-webkit-scrollbar{display:none}
#main.sv2 .sv2-band__list.is-more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
#main.sv2 .sv2-band__list.is-more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
#main.sv2 .sv2-band__list.is-more-l.is-more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
#main.sv2 .sv2-band a{position:relative;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.18em;line-height:1;text-transform:uppercase;text-decoration:none;color:var(--soft);transition:color .5s var(--e)}
#main.sv2 .sv2-band a:hover,#main.sv2 .sv2-band__list a.is-on{color:var(--ink)}
#main.sv2 .sv2-band__list a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--red-hi),var(--red-lo));transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--o)}
#main.sv2 .sv2-band__list a:hover::after,#main.sv2 .sv2-band__list a.is-on::after{transform:none}
#main.sv2 .sv2-band__list a[data-n]::before{content:attr(data-n);order:2;position:relative;top:-.55em;font-size:9px;letter-spacing:.06em;color:var(--red)}
#main.sv2 .sv2-band__price{color:var(--red)!important}
#main.sv2 .sv2-band__price i{font-style:normal;transition:translate .6s var(--o)}
#main.sv2 .sv2-band__price:hover i{translate:4px 0}

/* ---------- the sections: on the paper, a hairline between them, the heading light with the short red rule ---------- */
#main.sv2 .service{background:transparent!important;padding-top:clamp(56px,7vw,112px)!important;padding-bottom:clamp(56px,7vw,112px)!important;border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h,64px) + var(--sv-band) - 1px)}
#main.sv2 .sv2-band + .service{border-top:0}
#main.sv2 .service-head-col h2{margin:0 0 clamp(20px,2vw,32px)!important;padding-top:26px;font-weight:400!important;font-size:clamp(28px,2.8vw,44px)!important;line-height:1.08!important;letter-spacing:-.025em;text-transform:none!important;color:var(--ink);
  background:linear-gradient(var(--red),var(--red)) no-repeat 0 -26px/28px 1px;background-origin:content-box}
#main.sv2 .service-category-intro{max-width:none!important;width:auto!important}
#main.sv2 .service-category-intro p{max-width:62ch;font-size:clamp(15px,1.05vw,17px)!important;line-height:1.65!important;color:var(--soft)!important}
#main.sv2 .service-category-intro b{font-weight:600;color:var(--ink)}
@media (min-width:1024px){
  #main.sv2 .service{grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;column-gap:clamp(48px,6vw,120px)!important;align-items:start}
}

/* ---------- the services: a slim editorial list (red number, light name, the arrow, hairlines) ---------- */
#main.sv2 .links{margin:0!important;padding:0!important;border-bottom:1px solid var(--line)}
#main.sv2 .links-item{margin:0!important;padding:0!important;border:0!important}
#main.sv2 .links-item .link{display:grid!important;grid-template-columns:52px minmax(0,1fr) 28px!important;align-items:baseline;gap:0 12px;padding:22px 0!important;margin:0!important;border:0!important;border-top:1px solid var(--line)!important;text-decoration:none!important}
#main.sv2 .links-item .link::before,#main.sv2 .links-item .link::after{display:none!important}
#main.sv2 .links-item .number{margin:0!important;font-size:11px!important;font-weight:600!important;letter-spacing:.12em;color:var(--red)!important}
#main.sv2 .links-item .name{margin:0!important;font-size:clamp(19px,1.7vw,26px)!important;font-weight:300!important;line-height:1.25!important;letter-spacing:-.01em;color:var(--ink)!important;text-decoration:none!important;border:0!important;transition:color .5s var(--e),translate .8s var(--o)}
#main.sv2 .links-item .name::before,#main.sv2 .links-item .name::after{display:none!important}
#main.sv2 .links-item .icon{align-self:center;width:18px!important;height:18px!important;opacity:.45;transition:opacity .5s var(--e),translate .8s var(--o)}
#main.sv2 .links-item .icon img{width:18px!important;height:18px!important}
@media (hover:hover){
  #main.sv2 .links:hover .link .name{color:rgba(45,45,45,.45)!important}
  #main.sv2 .links .link:hover .name{color:var(--red)!important;translate:6px 0}
  #main.sv2 .links .link:hover .icon{opacity:1;translate:3px -3px}
}
#main.sv2 div.link .name{color:var(--soft)!important}

/* the strategic session: its text and the request button under the first line, then the other sessions */
#main.sv2 .service--strategic .strategic-right>.service-category-intro{margin:28px 0 24px 64px}
#main.sv2 .service--strategic .strategic-cta{margin:0 0 40px 64px}
#main.sv2 .links--secondary{margin-top:0!important}

/* the technologies run on the paper as before, a hairline above */
#main.sv2 .tech-marquee-section{border-top:1px solid var(--line);padding-top:clamp(56px,7vw,112px)}
#main.sv2 .tech-marquee-title{text-transform:none!important;font-weight:400!important;letter-spacing:-.025em;padding-top:26px;background:linear-gradient(var(--red),var(--red)) no-repeat 0 -26px/28px 1px;background-origin:content-box}

@media (max-width:767px){
  #main.sv2{--sv-band:52px}
  #main.sv2 .sv2-band{gap:18px}
  #main.sv2 .sv2-band__list{gap:22px}
  #main.sv2 .sv2-band a{letter-spacing:.14em}
  #main.sv2 .sv2-band a.sv2-band__price{display:none}
  #main.sv2 .links-item .link{grid-template-columns:40px minmax(0,1fr) 20px!important;padding:18px 0!important}
  #main.sv2 .service--strategic .strategic-right>.service-category-intro,#main.sv2 .service--strategic .strategic-cta{margin-left:0}
}

/* the old drop-in of each line (services.js) waits for its own scroll trigger and can leave a list blank after a jump from the band;
   here the lines are always there and rise as they come into view, like the portfolio index (scroll-driven, no script) */
#main.sv2 .links-item .link{opacity:1!important;transform:none!important}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    #main.sv2 .links-item{animation:sv2In linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
  }
}
@keyframes sv2In{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

/* the section names stay in capitals, as on the old page (owner, 2026-10-18) */
#main.sv2 .service-head-col h2,#main.sv2 .tech-marquee-title{text-transform:uppercase!important;font-size:clamp(24px,2.3vw,36px)!important;letter-spacing:.01em!important}

/* phones: the sections have no side padding of their own (only the headings and the texts are indented), so the service rows, their
   numbers and arrows and the request button ran into the screen edges (owner, 2026-10-19). They take the same 5vw gutter as the text. */
@media (max-width:767px){
  #main.sv2 .service .links{margin-left:5vw!important;margin-right:5vw!important}
  #main.sv2 .service--strategic .strategic-cta{display:flex;justify-content:center;width:calc(100% - 10vw)!important;margin:0 5vw 40px!important}
}