/* The services list and the service pages, refreshed in the look of /pricing (owner, 2026-10-26: "structure is fine, just freshen it,
   the prices page looks fresher"; live for everyone the same day, ?v=1 shows the old pages). Loaded by services_category.blade.php
   (#main.svf, on top of services-v2.css) and services.blade.php (#main.svf). Same texts, headings and links; footer.css gives the variables (.pf-vars) and .pf-pill. */

/* ---------- shared: the eyebrow with the red rule, the pills ---------- */
#main.svf .svf-eyebrow{display:flex;align-items:center;gap:12px;margin:0;font-size:10px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--page-mute)}
#main.svf .svf-eyebrow::before{content:"";width:28px;height:1px;background:var(--red)}
#main.svf .svf-eyebrow a{color:inherit;text-decoration:none;transition:color .5s var(--e-soft)}
#main.svf .svf-eyebrow a:hover{color:var(--red)}
#main.svf .svf-acts{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:36px}
#main.svf .pf-pill{text-decoration:none;cursor:pointer}
#main.svf .pf-pill{color:#FFF7EE!important}
#main.svf .pf-pill--ghost{border-color:rgba(45,45,45,.28);background:transparent;color:var(--page-ink)!important}
#main.svf .pf-pill--ghost::before{opacity:0;transition:opacity 1.2s var(--e-fill),background-position 2.4s var(--e-fill)}
#main.svf .pf-pill--ghost:hover{color:#FFF7EE!important;border-color:var(--red)}
#main.svf .pf-pill--ghost:hover::before{opacity:1}

/* ---------- the list: the hero on the left as on /pricing ---------- */
#main.svf .svf-hero{max-width:1100px;padding:clamp(56px,10vh,120px) 0 clamp(40px,5vw,72px)}
#main.svf .svf-hero h1{margin:20px 0 26px;text-align:left;transform:none!important;text-transform:none!important;font-weight:100!important;font-size:clamp(40px,5vw,84px)!important;line-height:1.04!important;letter-spacing:-.02em!important}
#main.svf .svf-hero h1::before,#main.svf .svf-hero h1::after{display:none}
#main.svf .svf-lead{margin:0;max-width:62ch;font-size:clamp(17px,1.45vw,22px);line-height:1.55;color:var(--page-soft)}
#main.svf .service-short>.svf-hero{padding-left:var(--sv-gut);padding-right:var(--sv-gut);box-sizing:content-box}

/* the figures: a hairline grid of six cells, as the facts strip of /pricing (the thin numbers stay) */
#main.svf :is(.service-short,.service-long)>.stats-section{padding:0 var(--sv-gut)!important;margin:0 0 clamp(28px,3vw,48px)!important;border:0!important;max-width:none!important;width:auto!important}
#main.svf :is(.service-short,.service-long)>.stats-section .stats-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--page-line);border:1px solid var(--page-line)}
#main.svf :is(.service-short,.service-long)>.stats-section .stat-item{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start!important;gap:14px;min-height:118px;padding:22px 22px 20px!important;background:var(--paper);text-align:left!important}
#main.svf :is(.service-short,.service-long)>.stats-section .stat-number{font-size:clamp(34px,3.2vw,52px)!important;line-height:1!important;white-space:nowrap}
#main.svf :is(.service-short,.service-long)>.stats-section .stat-label{order:-1;font-size:10px!important;letter-spacing:.24em!important;color:var(--page-mute)!important;text-align:left!important}
#main.svf :is(.service-short,.service-long)>.stats-section .stat-suffix{position:static!important;display:inline!important;top:auto!important;left:auto!important;transform:none!important;margin:0 .1em 0 0!important;letter-spacing:0!important}
@media (max-width:1023px){#main.svf :is(.service-short,.service-long)>.stats-section .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:599px){
  #main.svf :is(.service-short,.service-long)>.stats-section .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #main.svf :is(.service-short,.service-long)>.stats-section .stat-item{min-height:104px;padding:18px 16px 16px!important}
  #main.svf :is(.service-short,.service-long)>.stats-section .stat-number{font-size:34px!important}
  #main.svf .svf-hero{padding-top:36px}
  #main.svf .svf-acts .pf-pill{width:100%;justify-content:center}
}

/* the sections: headings in natural case as on /pricing, held on the left while the list scrolls */
#main.svf .service-head-col h2{text-transform:none!important;font-weight:400!important;font-size:clamp(26px,2.6vw,38px)!important;line-height:1.1!important;letter-spacing:-.015em!important}
@media (min-width:1024px){
  #main.svf .service-head-col{position:sticky;top:calc(var(--header-h,64px) + var(--sv-band) + 32px);align-self:start}
}

/* the rows: the name in ink, its starting price beside it, the arrow */
#main.svf .service-short .links-item .link{grid-template-columns:44px minmax(0,1fr) minmax(0,auto) 24px!important;gap:0 18px;padding:20px 0!important}
#main.svf .service-short .links-item .name{font-weight:400!important;font-size:clamp(17px,1.35vw,21px)!important;line-height:1.3!important}
#main.svf .service-short .links-item .svf-price{margin:0;justify-self:end;max-width:24ch;font-size:13.5px;line-height:1.45;text-align:right;color:var(--page-soft)}
#main.svf .service-short .links-item .icon{opacity:.35}
@media (hover:hover){
  #main.svf .service-short .links:hover .link .name{color:var(--page-ink)!important}
  #main.svf .service-short .links .link:hover .name{color:var(--red)!important}
  #main.svf .service-short .links .link:hover .svf-price{color:var(--page-ink)}
}
#main.svf .service-short div.link{grid-template-columns:44px minmax(0,1fr) minmax(0,auto)!important}
@media (max-width:767px){
  #main.svf .service-short .links-item .link{grid-template-columns:34px minmax(0,1fr) 18px!important;row-gap:4px}
  #main.svf .service-short .links-item .svf-price{grid-column:2;grid-row:2;justify-self:start;text-align:left;max-width:none;font-size:13px}
  #main.svf .service-short .links-item .icon{grid-column:3;grid-row:1}
}

/* the strategic session: its text in the voice of the page (no box, the bold softened), the request as the red pill */
#main.svf .service--strategic .strategic-right>.service-category-intro{margin:18px 0 26px 62px!important;padding:0;max-width:60ch}
#main.svf .service--strategic .strategic-right>.service-category-intro p{font-size:16px;line-height:1.65;color:var(--page-soft)}
#main.svf .service--strategic .strategic-right>.service-category-intro strong{font-weight:500;color:var(--page-ink)}
#main.svf .service--strategic .strategic-right>.service-category-intro p:last-child{margin-bottom:0}
#main.svf .service--strategic .strategic-cta.pf-pill{width:auto!important;max-width:none!important;align-self:flex-start;height:52px;margin:0 0 40px 62px!important}
@media (max-width:767px){
  #main.svf .service--strategic .strategic-right>.service-category-intro{margin:14px 5vw 22px!important}
  #main.svf .service--strategic .strategic-cta.pf-pill{display:inline-flex!important;margin:0 5vw 32px!important}
}

/* the band of sections and the technologies keep their look; the technologies heading in natural case too */
#main.svf .tech-marquee-title{text-transform:none!important;font-size:clamp(26px,2.6vw,38px)!important;letter-spacing:-.015em!important}

/* ---------- the service page (owner, 2026-10-26: away from the dark beige, lighter and fresher, as /pricing) ----------
   the bands lose their dark beige; the cards, results, price and form become light cells in a hairline grid */
#main.svf{--sv-gut:5vw;--svf-cell:#FFFDF9;--svf-line:rgba(45,45,45,.1)}
@media (min-width:1200px){#main.svf{--sv-gut:5.5vw}}
#main.svf .service-long>.svf-hero{padding-left:var(--sv-gut);padding-right:var(--sv-gut);box-sizing:content-box;max-width:980px}
#main.svf .svf-eyebrow span{color:rgba(45,45,45,.3);margin:0 -2px}
#main.svf .svf-hero--inner .svf-lead{max-width:64ch}
#main.svf .svf-hero--inner .svf-lead p{margin:0 0 .9em;font-size:inherit;line-height:inherit;color:inherit}
#main.svf .svf-hero--inner .svf-lead p:last-child{margin-bottom:0}
#main.svf .svf-from{margin:20px 0 0;font-size:14px;letter-spacing:.01em;color:var(--page-mute)}
#main.svf .svf-from::first-letter{text-transform:uppercase}
#main.svf .pf-pill svg{display:none}

/* headings as on /pricing: natural case, regular weight, the short red rule above */
#main.svf .service-long>section h2,#main.svf .service-long .faq h3{text-transform:none!important;font-weight:400!important;font-size:clamp(28px,2.6vw,40px)!important;line-height:1.12!important;letter-spacing:-.015em!important;color:var(--page-ink)}
#main.svf .service-long>section h2::before,#main.svf .service-long .faq h3::before{content:"";display:block;width:28px;height:1px;margin-bottom:22px;background:var(--red)}

/* no dark bands: every section on the page paper */
#main.svf .service-long>section{background:transparent!important}

/* the cards ("What we do"): a hairline grid of light cells, two across from 1024px */
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .links{display:grid;grid-template-columns:1fr;gap:1px;background:var(--svf-line);border:1px solid var(--svf-line)}
@media (min-width:1024px){#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .links{grid-template-columns:repeat(2,minmax(0,1fr))}}
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .links-item{margin:0;border:0;background:var(--svf-cell)}
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .links-item::before,#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .links-item::after,#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .link::before,#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .link::after{display:none!important}
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .link{display:flex!important;flex-direction:column;align-items:flex-start;gap:14px;height:100%;padding:28px 28px 30px!important;border:0!important}
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .link .number{margin:0;font-size:12px;letter-spacing:.14em;color:var(--red)}
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .link .content{display:block!important;width:100%}
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .link h4{margin:0 0 12px;font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.3;text-transform:none;color:var(--page-ink)}
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .link .text,#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .link .text p{max-width:none!important;width:auto!important;margin:0;text-align:left!important;font-size:15px;line-height:1.6;color:var(--page-soft)}

/* the stages: on the paper, the request under them as a light cell with the pill */
#main.svf .service-long .stages .button-holder{margin-top:48px;padding:28px 32px;background:var(--svf-cell);border:1px solid var(--svf-line);gap:28px}
#main.svf .service-long .stages .button-holder h4{font-weight:400;color:var(--page-ink)}
#main.svf .service-long .stages .button-holder .pf-pill,#main.svf .service-long .faq .pf-pill{width:auto!important;max-width:none!important;min-width:max-content;flex:none!important;height:52px!important;padding:0 30px!important;white-space:nowrap;align-self:center}

/* the results: light cells in the hairline grid, the text on the left, the arrow small; the last cell asks for the price in red */
#main.svf .service-long .result .row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0!important;background:var(--svf-line);border:1px solid var(--svf-line)}
@media (max-width:1023px){#main.svf .service-long .result .row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){#main.svf .service-long .result .row{grid-template-columns:1fr}}
#main.svf .service-long .result .result-item{width:auto!important;max-width:none!important;min-height:0!important;height:auto!important;margin:0!important;padding:28px 28px 30px!important;display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:flex-start!important;gap:18px;background:var(--svf-cell)!important;text-align:left!important}
#main.svf .service-long .result .result-item img{position:static!important;width:22px!important;height:22px!important;margin:0!important;opacity:.85}
#main.svf .service-long .result .result-item h4{margin:0!important;font-weight:400;font-size:17px;line-height:1.5;text-align:left!important;color:var(--page-ink)}
#main.svf .service-long .result .result-item.link{cursor:pointer;background:#FBF1EE!important;transition:background .6s var(--e-soft)}
#main.svf .service-long .result .result-item.link h4{color:var(--red)}
#main.svf .service-long .result .result-item.link:hover{background:#F7E4DF!important}
#main.svf .service-long .result .result-item.link .animate-holder{position:static!important;margin-top:auto}

/* the price: a light cell, the line large and thin, All prices as the ghost pill */
#main.svf .service-price .head{padding:clamp(28px,3vw,44px);background:var(--svf-cell);border:1px solid var(--svf-line)}
#main.svf .service-price .service-price-line{font-weight:200;font-size:clamp(30px,3.2vw,48px)!important;line-height:1.1;letter-spacing:-.02em;color:var(--page-ink);margin-bottom:22px!important}
#main.svf .service-price .service-price-note{max-width:62ch}
#main.svf .service-price .service-price-btn.pf-pill{height:52px;margin-top:22px}

/* the question form: light fields with a hairline */
#main.svf .service-long .faq input,#main.svf .service-long .faq textarea{background:var(--svf-cell)!important;border:1px solid var(--svf-line)!important}
#main.svf .service-long .faq input:focus,#main.svf .service-long .faq textarea:focus{border-color:rgba(45,45,45,.35)!important}

@media (max-width:599px){
  #main.svf .svf-hero--inner .svf-lead{font-size:17px}
  #main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .link,#main.svf .service-long .result .result-item{padding:22px 20px 24px!important}
  #main.svf .service-long .stages .button-holder{padding:22px 20px}
}

/* the hairline grids drawn by the cells themselves, so an odd last cell leaves paper, not a grey hole */
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .links,#main.svf .service-long .result .row{gap:0!important;background:transparent!important;border:0!important;padding:1px 0 0 1px!important}
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .links-item,#main.svf .service-long .result .result-item{margin:-1px 0 0 -1px!important;border:1px solid var(--svf-line)!important}
/* the old one-by-one line reveal left the grid half empty for seconds: the cells are simply there */
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .link{opacity:1!important;transform:none!important}
#main.svf .service-long .result .result-item h4{text-indent:0!important}
#main.svf .service-long .result .result-item img{opacity:.45}
#main.svf .service-price .service-price-note{line-height:1.65;color:var(--page-soft)}
#main.svf .service-price .service-price-note+.service-price-note{margin-top:14px!important}
/* the big drawn arrow turned into a grey smudge at cell size: a short red rule marks each result instead */
#main.svf .service-long .result .result-item img{display:none!important}
#main.svf .service-long .result .result-item::before{content:"";display:block;width:24px;height:1px;background:var(--red)}

/* ---------- 2026-10-26, owner: stages without the circles, more minimal; a small rounding on every rectangle (Apple-like, not the pill radius) ---------- */
#main.svf{--svf-r:14px;--svf-r-s:10px}

/* the stages: no circles, no vertical line; plain rows under a hairline, the red number, the title, the text */
#main.svf .service-long .stages .timeline .item{border-left:0!important;padding:30px 0!important;border-top:1px solid var(--svf-line)!important}
#main.svf .service-long .stages .timeline .item:last-child{border-bottom:1px solid var(--svf-line)!important}
#main.svf .service-long .stages .timeline .item::before,#main.svf .service-long .stages .timeline .item::after{display:none!important}
#main.svf .service-long .stages .timeline .head{align-items:baseline!important;gap:22px!important;margin:0!important}
#main.svf .service-long .stages .timeline .number{min-width:28px;margin:0!important}
#main.svf .service-long .stages .timeline .number p:first-child{margin:0;font-size:12px!important;letter-spacing:.14em;color:var(--red)!important}
#main.svf .service-long .stages .timeline .number p:nth-child(2),#main.svf .service-long .stages .timeline .number p::before{display:none!important}
#main.svf .service-long .stages .timeline .head>p{font-weight:400;font-size:clamp(18px,1.4vw,21px);line-height:1.35;color:var(--page-ink)}
#main.svf .service-long .stages .timeline .description p{color:var(--page-soft);line-height:1.65}

/* the cells stand apart with a small gap, each with its own hairline and rounding */
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .links,#main.svf .service-long .result .row{gap:12px!important;padding:0!important}
#main.svf .service-long>section.service:not(.sv-ways):not(.sv-stacks) .links-item,#main.svf .service-long .result .result-item{margin:0!important;border-radius:var(--svf-r);overflow:hidden}
#main.svf :is(.service-short,.service-long)>.stats-section .stats-grid{border-radius:var(--svf-r);overflow:hidden}
#main.svf .service-price .head,#main.svf .service-long .stages .button-holder{border-radius:var(--svf-r)}
#main.svf .service-long .faq input,#main.svf .service-long .faq textarea{border-radius:var(--svf-r-s)!important}

/* the stages a quarter tighter (owner, 2026-10-26: too much air in "How hiring works") */
#main.svf .service-long .stages{padding-top:clamp(56px,5.5vw,84px)!important;padding-bottom:clamp(64px,6vw,90px)!important}
#main.svf .service-long .stages>h2{margin-bottom:clamp(24px,2.4vw,34px)!important}
#main.svf .service-long .stages .timeline{padding-top:0!important;padding-bottom:0!important;margin-bottom:0!important}
#main.svf .service-long .stages .timeline .item{padding:22px 0!important}
#main.svf .service-long .stages .timeline .description p{margin:0}
#main.svf .service-long .stages .button-holder{margin-top:32px!important;padding:22px 28px!important}
#main.svf .service-long .stages .button-holder{width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important;justify-content:space-between!important;align-items:center!important}
#main.svf .service-long .stages .button-holder h4{width:auto!important;max-width:60ch!important;margin:0!important}
@media (max-width:767px){#main.svf .service-long .stages .button-holder{flex-direction:column;align-items:flex-start!important}}

/* ---------- the band of the page parts (owner, 2026-10-26: "a filter like on the services list, showing the structure"):
   the look of the list's sections band, sticky under the header, the part in view in ink with the red line; two columns where one line does not fit ---------- */
#main.svf{--svf-band:58px}
#main.svf .svf-band{position:sticky;top:calc(var(--header-h,64px) - 1px);z-index:40;display:flex;align-items:stretch;justify-content:space-between;gap:24px;min-height:var(--svf-band);margin:0 0 clamp(8px,1vw,16px);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-top:1px solid var(--svf-line);border-bottom:1px solid var(--svf-line)}
#main.svf .svf-band__list{display:flex;align-items:stretch;gap:clamp(22px,2.6vw,40px);min-width:0;overflow:hidden}
#main.svf .svf-band a,#main.svf .svf-band__cta{position:relative;display:inline-flex;align-items:center;gap:6px;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(--page-soft);background:none;border:0;padding:0;cursor:pointer;transition:color .5s var(--e-soft)}
#main.svf .svf-band a:hover,#main.svf .svf-band a.is-on{color:var(--page-ink)}
#main.svf .svf-band__list a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#C8392D,#9A241C);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.19,1,.22,1)}
#main.svf .svf-band__list a:hover::after,#main.svf .svf-band__list a.is-on::after{transform:none}
#main.svf .svf-band__cta{color:var(--red)}
#main.svf .svf-band__cta i{font-style:normal;transition:translate .6s cubic-bezier(.19,1,.22,1)}
#main.svf .svf-band__cta:hover i{translate:4px 0}
/* where one line does not fit: an open two-column list, held under the header like the line (never sideways, never behind a button) */
#main.svf .svf-band.is-grid .svf-band__list{display:grid;grid-template-columns:repeat(2,max-content);column-gap:clamp(36px,11vw,72px);padding:12px 0 14px;flex:1 1 auto}
#main.svf .svf-band.is-grid .svf-band__list a{padding:9px 0;letter-spacing:.12em;line-height:1.3;white-space:normal}
#main.svf .svf-band.is-grid .svf-band__list a::after{bottom:4px}
#main.svf .svf-band.is-grid .svf-band__list a.is-on{color:var(--red)}
#main.svf .svf-band.is-grid .svf-band__cta{display:none!important}
/* a jump lands its part just under the header and the band */
#main.svf .service-long>[id^="sv-"]{scroll-margin-top:calc(var(--header-h,64px) + var(--svf-band) + 16px)}
#main.svf .service-long>.svf-band.is-grid~[id^="sv-"]{scroll-margin-top:calc(var(--header-h,64px) + 150px)}
/* the starting price on the right of the band, then the request */
#main.svf .svf-band__end{display:flex;align-items:center;gap:22px;flex:0 0 auto}
#main.svf .svf-band a.svf-band__price{font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--page-ink)}
#main.svf .svf-band a.svf-band__price:hover{color:var(--red)}
#main.svf .svf-band__price+.svf-band__cta{padding-left:22px;border-left:1px solid var(--svf-line);align-self:center;height:18px}
/* two columns: the price as its own line under them, the request is the pill in the page itself */
#main.svf .svf-band.is-grid{flex-wrap:wrap;row-gap:0}
/* the tight line on wide screens with many parts (hire pages): smaller gaps, the request link left out, the price stays */
#main.svf .svf-band.is-tight .svf-band__list{gap:clamp(16px,1.5vw,24px)}
#main.svf .svf-band.is-tight .svf-band__list a{letter-spacing:.12em}
#main.svf .svf-band.is-tight .svf-band__cta{display:none!important}
#main.svf .svf-band.is-grid .svf-band__end{flex:1 0 100%;padding:10px 0 12px;border-top:1px solid var(--svf-line)}
#main.svf .svf-band.is-grid .svf-band__end:not(:has(.svf-band__price)){display:none}

/* projects to stages: about half the air (owner, 2026-10-26): the empty bottom padding of the projects row goes, the section keeps a little */
#main.svf .portfolio-content.portfolio-holder .row{padding-bottom:0!important}
#main.svf .portfolio-content.portfolio-holder{padding-bottom:clamp(48px,5vw,80px)!important}