/* ============================================================
   Laguna Studio, services round twelve (Cesar, 2026-09-26)
   Loaded after site-v3.css on services.html and the four
   services-*.html pages. Every class here is new (sv4, cp4, tl4,
   jr, sp4) so site-v3.js finds none of its old hooks; the .ig
   diagram classes are reused as they are.
   ============================================================ */

/* ---------- 1. the four services: fine lines, one column opens (services-v4.js 1) ---------- */
.sv4{position:relative;background:var(--paper)}
.sv4__head{padding:clamp(88px,12vh,140px) var(--pad) clamp(28px,4vh,48px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.sv4__head .dl-say{max-width:18ch}
.sv4__sub{margin:6px 0 0;max-width:62ch;font-size:15.5px;line-height:1.65;color:var(--ink-3)}
.sv4__row{position:relative;display:flex;margin:0 var(--pad)}
.sv4__col{position:relative;display:block;min-width:0;color:var(--ink);text-decoration:none;outline:none;cursor:pointer}
.sv4__in{display:block;position:relative}
/* the lines: a 1px rule at each column's left edge that runs past the row, and two across it */
.sv4__ln{position:absolute;left:0;top:-48px;bottom:-48px;width:1px;background:var(--grey-3);z-index:3;pointer-events:none}
.sv4__ln--end{left:auto;right:0}
.sv4__hl{position:absolute;left:calc(-1 * var(--pad));right:calc(-1 * var(--pad));height:1px;background:var(--grey-3);z-index:3;pointer-events:none}
.sv4__hl--t{top:0}.sv4__hl--b{bottom:0}
/* a column's hover layer sits under its content */
.sv4__col::before{content:"";position:absolute;inset:0;background:var(--paper-2);opacity:0;transition:opacity .35s var(--ease)}
.sv4__col:hover::before{opacity:1}
.sv4__col:focus-visible .sv4__in{box-shadow:inset 0 0 0 2px var(--blue)}
.sv4__col:active .sv4__name b,.sv4__col:active .sv4__more{transform:translateY(1px)}
.sv4__name{position:absolute;z-index:2;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;inset:0;padding:clamp(20px,2vw,32px)}
.sv4__name span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--blue-ink)}
.sv4__name b{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,1.9vw,2rem);letter-spacing:-.02em;line-height:1.1;color:var(--ink);transition:color .3s var(--ease),transform .2s var(--spring)}
.sv4__col:hover .sv4__name b{color:var(--blue-ink)}
.sv4__name--h b{max-width:11ch}
.sv4__name--v{padding-inline:0;align-items:center}
.sv4__name--v b{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:clamp(1.1rem,1.5vw,1.6rem)}
.sv4__col:active .sv4__name--v b{transform:rotate(180deg) translateY(-1px)}
.sv4__body{position:relative;z-index:1;display:grid;gap:20px}
.sv4__copy{display:flex;flex-direction:column;gap:14px;max-width:42ch}
.sv4__copy > span{display:block}
.sv4__copy .step__t{font-size:clamp(1.8rem,3vw,2.7rem);margin:0}
.sv4__more{display:inline-flex !important;align-items:center;gap:10px;align-self:flex-start;margin-top:8px;padding:11px 16px;border-radius:var(--r);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--ink);
  box-shadow:0 2px 4px rgba(11,13,14,.12),0 10px 22px -12px rgba(11,13,14,.4);transition:background-color .3s var(--ease),transform .2s var(--spring)}
.sv4__col:hover .sv4__more{background:var(--blue)}
.sv4__ar{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--spring)}
.sv4__col:hover .sv4__ar{transform:translateX(3px)}
.sv4__fig{display:block;min-width:0}
.sv4__fig .vs__pic.ig{width:100%}
/* the diagram's tiles arrive once its column is open */
.sv4__col.is-in .ig__t{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sv4__col.is-in .ig__core,.sv4__col.is-in .ig__queue,.sv4__col.is-in .ig__steps{opacity:1}

@media(min-width:901px){
  .sv4:not(.sv4--static) .sv4__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--nav-top) + 64px);padding-bottom:28px;box-sizing:border-box}
  .sv4:not(.sv4--static) .sv4__row{flex:1;min-height:0;max-height:760px}
  .sv4:not(.sv4--static) .sv4__col{flex:0 0 25%}
  .sv4:not(.sv4--static) .sv4__in{position:absolute;inset:0;overflow:clip}
  .sv4:not(.sv4--static) .sv4__name--h{opacity:calc(var(--hz,1) * clamp(0, 1 - var(--open,0) * 2.5, 1));transform:translate3d(0,calc((1 - var(--hz,1)) * 10px),0)}
  .sv4:not(.sv4--static) .sv4__name--v{opacity:calc(var(--vt,0) * clamp(0, 1 - var(--open,0) * 2.5, 1))}
  .sv4:not(.sv4--static) .sv4__body{position:absolute;left:0;top:0;bottom:0;width:calc(var(--roww,1200px) * .88);
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,3vw,56px);align-items:center;padding:clamp(28px,3vw,56px);box-sizing:border-box;
    opacity:clamp(0,(var(--open,0) - .12) * 2.2,1)}
  .sv4:not(.sv4--static) .sv4__col:not(.is-open) .sv4__body{pointer-events:none}
  .sv4:not(.sv4--static) .sv4__col.is-open::before{opacity:0}
}
/* phones, and reduced motion: the four stack, name over copy over diagram, a line between each */
.sv4--static .sv4__name--v{display:none}
.sv4--static .sv4__name--h{position:relative;inset:auto;padding:0;gap:10px;justify-content:flex-start}
.sv4--static .sv4__col{padding:clamp(28px,4vw,48px) 0 clamp(28px,4vw,48px)}
.sv4--static .sv4__col::before{display:none}
.sv4--static .sv4__ln{left:calc(-1 * var(--pad));right:calc(-1 * var(--pad));top:0;bottom:auto;width:auto;height:1px}
.sv4--static .sv4__ln--end{top:auto;bottom:0}
.sv4--static .sv4__hl{display:none}
.sv4--static .sv4__row{flex-direction:column}
.sv4--static .sv4__body{margin-top:18px}
.sv4--static .sv4__name--h b{max-width:none}
@media(min-width:901px){.sv4--static .sv4__body{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:48px}}
@media(max-width:900px){.sv4__name--v{display:none}}

/* ---------- 2. the comparison: the stack, then the system (services-v4.js 2) ---------- */
.cp4{position:relative;background:var(--paper)}
.cp4__head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(88px,14vh,160px) var(--pad) clamp(36px,5vh,56px)}
.cp4__sub{margin:0;font-family:var(--display);font-size:clamp(1.1rem,1.6vw,1.4rem);color:var(--blue-ink)}
.cp4__side{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(14px,2vh,24px);box-sizing:border-box;
  padding:calc(var(--nav-top) + 84px) var(--pad) clamp(20px,3vh,32px)}
.cp4__side--them{background:var(--paper-3);color:var(--ink)}
.cp4__side--us{background:var(--blue);color:#fff}
.cp4__top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cp4__top .step__n{margin:0}
.cp4__side--us .step__n{color:rgba(255,255,255,.78)}
.cp4__t{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.2vw,4rem);letter-spacing:-.03em;line-height:1.02}
.cp4__side--them .cp4__t{color:var(--ink-2)}
.cp4__fig{min-height:0;display:flex}
.cp4__fig > .vs__pic.ig{flex:1;height:100%;aspect-ratio:auto}
.cp4__side--us .cp4__fig > .vs__pic.ig{box-shadow:0 30px 60px -30px rgba(4,24,52,.55)}
.cp4__facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cp4__facts li{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:var(--r);font-size:13px;line-height:1.4;background:rgba(26,26,26,.05);color:var(--ink-3)}
.cp4__side--us .cp4__facts li{background:rgba(255,255,255,.12);color:#fff}
.cp4__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cp4__side--us .cp4__k{color:rgba(255,255,255,.72)}
/* the stack's tiles arrive when its side is on screen */
.cp4__side.is-in .ig__t{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cp4__side.is-in .ig__core{opacity:1}
.cp4__lines{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;opacity:0}
.cp4__lines i{position:absolute;display:block;background:var(--grey-3);will-change:transform}
.cp4__lines i.v{top:0;bottom:0;left:0;width:1px}
.cp4__lines i.h{left:0;right:0;top:0;height:1px}
@media(min-width:901px){
  .cp4:not(.cp4--static) .cp4__pin{position:sticky;top:0;height:100svh;overflow:clip}
  .cp4:not(.cp4--static) .cp4__side{position:absolute;inset:0}
  .cp4:not(.cp4--static) .cp4__side--us{clip-path:inset(50% 50%)}
}
.cp4--static .cp4__side{min-height:0;padding:clamp(40px,6vh,64px) var(--pad)}
.cp4--static .cp4__fig > .vs__pic.ig{aspect-ratio:564/410}
.cp4--static .cp4__fig > .vs__pic.jr{aspect-ratio:1000/620}
.cp4--static .cp4__lines{display:none}
@media(max-width:1200px){.cp4__facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.cp4__facts{grid-template-columns:1fr 1fr}.cp4--static .cp4__fig > .vs__pic.jr{aspect-ratio:3/4}}

/* the journey diagram (services-v4.js 2b) */
.jr .ig__base{stroke:rgba(14,92,186,.28)}
.jr .ig__base--main{stroke:var(--blue);opacity:.4}
/* round fourteen: the signal is hidden at rest; services-v4.js 2a draws each run */
.jr__p{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0}
.jr__p--main{stroke-width:3.5}
.jr__t em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;padding:2px 5px;border-radius:2px;margin-top:-2px;
  background:var(--blue-tint);color:var(--blue-ink)}
.jr__t em.jr__b--c{background:var(--paper);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--grey-3)}
.jr__t svg.jr__logo{fill:var(--ink);stroke:none}
.jr__t svg{transition:box-shadow .3s var(--ease),transform .35s var(--spring),background-color .3s var(--ease)}
.jr__t.is-hot svg{transform:scale(1.1);box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 5px rgba(14,92,186,.14),0 12px 24px -12px rgba(14,92,186,.6)}
.jr__t.is-hot span{color:var(--blue-ink)}
.jr__t.ig__t--end.is-hot svg{background:var(--blue)}
.jr__core.is-hot .ig__coreIn{transform:scale(1.08)}
.jr__core .ig__coreIn{transition:transform .35s var(--spring)}
.jr__zone--c{color:var(--ink-3)}
.jr__cap{position:absolute;z-index:5;left:50%;top:4%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--r);white-space:nowrap;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule),0 10px 24px -14px rgba(11,13,14,.35);font-size:14px;color:var(--ink);transition:opacity .3s var(--ease)}
.jr__cap.is-swap{opacity:0}
.jr__n{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;color:var(--blue-ink)}
.jr__s{font-family:var(--display);font-weight:500;letter-spacing:-.01em}
.jr__l{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:700px){.jr__l{display:none}.jr__t em{font-size:7.5px;padding:1px 3px}.jr__zone{font-size:8px}}
@media(max-width:560px){.jr__t em{display:none}}
/* reduced motion: every tool lit, no travelling pulse */
.jr.is-static .jr__t svg{box-shadow:inset 0 0 0 1.5px var(--blue)}
.jr.is-static .jr__p{display:none}
.jr.is-static .ig__base{stroke:var(--blue);opacity:.45}

/* ---------- 3. getting started: the line fills, the steps arrive with it (services-v4.js 3) ---------- */
.tl4{position:relative;background:var(--paper);padding:0 var(--pad)}
.tl4__isl{position:relative;border-radius:var(--r-panel);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule);padding:clamp(36px,5vw,72px)}
.tl4__head{display:flex;flex-direction:column;gap:14px}
.tl4__head .dl-lab{margin:0}
.tl4__head .dl-say{max-width:14ch;color:var(--ink)}
.tl4__line{position:relative;height:1px;background:var(--grey-3);margin:clamp(40px,7vh,72px) 0 clamp(28px,4vh,40px)}
.tl4__fill{position:absolute;left:0;top:-.5px;height:2px;width:100%;background:var(--blue);transform:scaleX(var(--t,0));transform-origin:0 50%}
.tl4__dot{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:4px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--grey-3);
  transition:background-color .35s var(--ease),box-shadow .35s var(--ease),transform .4s var(--spring)}
.tl4__dot:nth-of-type(2){left:calc(100% / 6)}.tl4__dot:nth-of-type(3){left:50%}.tl4__dot:nth-of-type(4){left:calc(500% / 6)}
.tl4__dot.is-on{background:var(--blue);box-shadow:0 0 0 5px rgba(14,92,186,.16);transform:scale(1.1)}
.tl4__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.tl4__step{background:var(--paper);border-radius:var(--r-panel);padding:clamp(22px,2.2vw,30px);min-height:190px;display:flex;flex-direction:column;gap:12px;
  box-shadow:inset 0 0 0 1px var(--rule),0 10px 22px -16px rgba(11,13,14,.3);
  opacity:var(--s,1);transform:translate3d(0,calc((1 - var(--s,1)) * 28px),0) scale(calc(.97 + var(--s,1) * .03))}
.tl4__ic{display:inline-flex;width:40px;height:40px;border-radius:var(--r);background:var(--paper-2);align-items:center;justify-content:center;margin-bottom:4px;transition:background-color .35s var(--ease)}
.tl4__ic svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s var(--ease)}
.tl4__step.is-cur .tl4__ic{background:var(--blue)}
.tl4__step.is-cur .tl4__ic svg{stroke:#fff}
.tl4__k{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink)}
.tl4__d{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
@media(min-width:901px){
  .tl4.is-pinned .tl4__run{height:220svh}
  .tl4.is-pinned .tl4__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--nav-top) + 60px);box-sizing:border-box}
}
.tl4:not(.is-pinned){padding-top:clamp(56px,9vh,112px)}
@media(max-width:900px){.tl4__steps{grid-template-columns:1fr}.tl4__line{display:none}.tl4__head{margin-bottom:28px}}

/* ---------- 4. the service pages ---------- */
.sp4-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,72px);align-items:center;max-width:none}
.sp4-hero h1{font-size:clamp(2.4rem,4.4vw,4.4rem);max-width:15ch}
.shd__lab a{color:inherit;text-decoration:underline;text-decoration-color:var(--grey-3);text-underline-offset:3px;transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
.shd__lab a:hover{color:var(--blue-ink);text-decoration-color:currentColor}
.shd__lab a:active{opacity:.7}
.sp4-fig .vs__pic.ig{width:100%}
.sp4-fig.is-in .ig__t{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sp4-fig.is-in .ig__core,.sp4-fig.is-in .ig__queue,.sp4-fig.is-in .ig__steps{opacity:1}
@media(max-width:900px){.sp4-hero__in{grid-template-columns:1fr}}

.sp4{position:relative;background:var(--paper);padding:0 var(--pad) clamp(72px,10vh,120px);overflow-x:clip}
.sp4__head{padding:clamp(88px,12vh,140px) 0 clamp(40px,6vh,64px);display:flex;flex-direction:column;gap:14px}
.sp4__head .dl-say{max-width:18ch}
.sp4__sub{margin:0;max-width:56ch;font-size:16px;line-height:1.65;color:var(--ink-3)}
.sp4__rows{position:relative}
.sp4__row{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,72px);padding:clamp(36px,5vh,56px) 0;
  transition:opacity .7s var(--ease),transform .8s var(--out)}
.sp4__row.is-pre{opacity:0;transform:translate3d(0,24px,0)}
.sp4__hl{position:absolute;left:calc(-1 * var(--pad));right:calc(-1 * var(--pad));top:0;height:1px;background:var(--grey-3);transform-origin:0 50%;transition:transform 1s var(--out)}
.sp4__row.is-pre .sp4__hl{transform:scaleX(0)}
.sp4__hl--end{position:relative;display:block;left:auto;right:auto;margin:0 calc(-1 * var(--pad))}
.sp4__lead{display:flex;flex-direction:column;gap:12px}
.sp4__i{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--blue-ink)}
.sp4__lead h3{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,2.8vw,2.6rem);letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.sp4__lead p{margin:0;max-width:44ch;font-size:17px;line-height:1.6;color:var(--ink-2)}
.sp4__lead .sp4__why{font-size:15px;color:var(--ink-3)}
.sp4__subs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.sp4__subs li{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:var(--r-panel);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule)}
.sp4__subs b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.sp4__subs span{font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.sp4__more{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;padding-top:clamp(40px,6vh,64px)}
.sp4__note{grid-column:1/-1;margin:0;max-width:60ch;font-size:15.5px;line-height:1.65;color:var(--ink-3)}
.sp4__switch{display:flex;flex-wrap:wrap;gap:8px}
.sp4__sw{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--r);font-size:14px;color:var(--ink-2);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow .25s var(--ease),color .25s var(--ease),transform .2s var(--spring)}
.sp4__sw span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
.sp4__sw:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3)}
.sp4__sw:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sp4__sw:active{transform:scale(.97)}
.sp4__sw[aria-current="page"]{background:var(--blue);color:#fff;box-shadow:none}
.sp4__sw[aria-current="page"] span{color:rgba(255,255,255,.8)}
.sp4__next{display:grid;grid-template-columns:auto auto;align-items:center;gap:4px 14px;text-decoration:none;color:var(--ink);padding:16px 20px;border-radius:var(--r-panel);
  background:var(--ink);color:#fff;box-shadow:0 2px 4px rgba(11,13,14,.12),0 14px 28px -14px rgba(11,13,14,.45);transition:background-color .3s var(--ease),transform .2s var(--spring)}
.sp4__next .step__n{grid-column:1;margin:0;color:rgba(255,255,255,.7)}
.sp4__next b{grid-column:1;font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-.01em}
.sp4__next .sv4__ar{grid-column:2;grid-row:1/3;width:20px;height:20px}
.sp4__next:hover{background:var(--blue)}
.sp4__next:hover .sv4__ar{transform:translateX(4px)}
.sp4__next:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sp4__next:active{transform:scale(.98)}
@media(max-width:900px){.sp4__row{grid-template-columns:1fr}.sp4__more{grid-template-columns:1fr}}
@media(max-width:560px){.sp4__subs{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .sp4__row,.sp4__hl,.tl4__dot,.jr__t svg,.jr__cap{transition:none}
  .sp4__row.is-pre{opacity:1;transform:none}.sp4__row.is-pre .sp4__hl{transform:none}
}

/* ---------- 5. phone corrections ---------- */
/* the column name already says what the eyebrow would */
.sv4--static .sv4__copy .step__n{display:none}
/* the zone labels move above their rows, centred, so no tile covers them */
@media(max-width:700px){
  .jr .jr__zone{left:50% !important;transform:translateX(-50%);white-space:nowrap}
  .jr .jr__zone:not(.jr__zone--c){top:15.5% !important}
  .jr .jr__zone--c{top:93% !important}
}

/* ---------- 6. round fifteen: one pinned stage for the four deliverables (Cesar, 2026-09-26) ----------
   Replaces round thirteen's sticky index and four bands. The stage pins under
   the header like the homepage steps: four fine lines frame the figure card on
   the left and run on across the copy, and each deliverable's copy rises in
   through the lower line and leaves through the upper one while the figure
   morphs into the next (services-v4.js 8). Without the pin (phones, reduced
   motion, no script) the four deliverables stack, each with its own figure.
   Section 9 is the other three services, as rows on the same lines. */
.dv{position:relative;display:block;background:var(--paper);
  --gx:clamp(28px,3.6vw,64px);--gy:clamp(32px,6vh,64px);--ctop:max(88px,calc(var(--pad) + 30px))}

/* the figure frame: the service diagrams' dotted ground */
.dv__fig,.dv__sfig,.sx__art{position:relative;overflow:hidden;border-radius:var(--r-panel);
  background:
    linear-gradient(to bottom,rgba(246,246,245,.8),rgba(246,246,245,0) 18%,rgba(246,246,245,0) 82%,rgba(246,246,245,.8)),
    radial-gradient(circle,rgba(26,26,26,.15) 1px,transparent 1.2px) 0 0/22px 22px,
    #fbfbfa;
  box-shadow:inset 0 0 0 1px var(--rule)}
.dv__art{position:absolute;inset:0;display:block}

/* ----- stacked (default): phones, reduced motion, before the script runs ----- */
.dv__lines,.dv__fig,.dv__prog{display:none}
.dv__card{position:relative;margin:clamp(40px,7vh,80px) var(--pad) 0;padding:0 clamp(20px,3.6vw,64px);border-radius:var(--r-panel);background:var(--paper-2)}
.dv__copy{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4.4vw,80px);align-items:start;padding:clamp(40px,7vh,72px) 0;box-shadow:0 1px 0 var(--grey-3)}
.dv__copy:last-child{box-shadow:none}
.dv__sfig{aspect-ratio:560/600;width:100%;max-width:560px}
@media(min-width:901px){.dv__copy .dv__sfig{position:sticky;top:112px}}

/* ----- the copy ----- */
.dv__eb{display:flex;align-items:baseline;gap:14px;margin:0 0 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.dv__eb span{color:var(--blue-ink)}
.dv__txt h2{margin:0 0 16px;font-family:var(--display);font-weight:500;font-size:clamp(2rem,3.1vw,3.1rem);line-height:1.02;letter-spacing:-.035em;color:var(--ink)}
.dv__lead{margin:0 0 12px;max-width:36ch;font-family:var(--display);font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.42;letter-spacing:-.01em;color:var(--ink-2)}
.dv__body{margin:0;max-width:54ch;font-size:15px;line-height:1.68;color:var(--ink-3)}
/* the four parts, condensed: name over sentence on one hairline row each */
.dv__subs{list-style:none;margin:clamp(20px,3vh,28px) 0 0;padding:0;box-shadow:0 -1px 0 var(--grey-3)}
.dv__subs li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:4px 20px;padding:11px 0;box-shadow:0 1px 0 var(--grey-3);align-items:baseline}
.dv__subs b{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.dv__subs span{font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.dv__hand{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:4px 20px;margin:clamp(16px,2.4vh,24px) 0 0;align-items:baseline;font-size:14.5px;line-height:1.52;color:var(--ink)}
.dv__hand span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-ink)}

/* ----- pinned (services-v4.js 8 adds .is-pin on wide screens with motion) ----- */
.dv.is-pin{height:calc(100svh + 4 * 140svh)}
.dv.is-pin .dv__pin{position:sticky;top:0;height:100svh;overflow:clip}
.dv.is-pin .dv__card{position:absolute;top:var(--ctop);bottom:var(--pad);left:var(--pad);right:var(--pad);margin:0;padding:0;
  --fh:calc(100svh - var(--ctop) - var(--pad) - 2 * var(--gy) - 30px);--fw:min(47%,calc(var(--fh) * .9333));will-change:clip-path}
.dv.is-pin .dv__fig{display:block;position:absolute;left:var(--gx);top:var(--gy);width:var(--fw);height:var(--fh);
  box-shadow:inset 0 0 0 1px var(--rule),0 2px 4px rgba(11,13,14,.04),0 30px 60px -44px rgba(14,40,80,.45)}
.dv.is-pin .dv__win{position:absolute;top:var(--gy);height:var(--fh);left:calc(var(--gx) + var(--fw) + clamp(40px,5.4vw,104px));right:var(--gx);overflow:clip;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
.dv.is-pin .dv__copy{position:absolute;left:0;right:0;top:0;display:block;padding:0;box-shadow:none;opacity:0;will-change:transform,opacity}
.dv.is-pin .dv__sfig{display:none}
.dv.is-pin .dv__txt{max-width:600px}
/* the lines: two across, two down, on the figure's edges, running past the card */
.dv.is-pin .dv__lines{display:block;position:absolute;inset:0;z-index:4;pointer-events:none}
.dv__lines i{position:absolute;left:0;top:0;display:block;background:var(--grey-3);will-change:transform}
.dv__lines i:nth-child(-n+2){width:100%;height:1px}
.dv__lines i:nth-child(n+3){width:1px;height:100%}
/* the progress mark sits under the lower line */
.dv.is-pin .dv__prog{display:flex;position:absolute;left:var(--gx);top:calc(var(--gy) + var(--fh) + 16px);align-items:center;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3)}
.dv__prog b{font-weight:400;color:var(--blue-ink)}
.dv__prog > i{position:relative;display:block;width:96px;height:1px;background:var(--grey-3)}
.dv__prog > i i{position:absolute;left:0;top:-.5px;width:100%;height:2px;background:var(--blue);transform:scaleX(var(--p,0));transform-origin:0 50%}

/* ----- the figure engine (.fx): a 560 x 600 canvas scaled into its frame ----- */
.fx{position:absolute;inset:0;overflow:hidden}
.fx__c{position:absolute;left:0;top:0;width:560px;height:600px;transform-origin:0 0}
.fx__ly{position:absolute;inset:0}
.fx__ly--w,.fx__ly--u{filter:drop-shadow(0 0 .7px rgba(11,13,14,.3)) drop-shadow(0 7px 9px rgba(14,40,80,.09))}
.fx__ly--b{filter:drop-shadow(0 8px 10px rgba(14,92,186,.22))}
.fx__a{position:absolute;inset:0;opacity:0;clip-path:inset(50%)}
.fx__a--w,.fx__a--u{background:var(--paper)}
.fx__a--p{background:#eef0f1}
.fx__a--g{background:#d9dcdf}
.fx__a--t{background:var(--blue-tint)}
.fx__a--i{background:var(--ink)}
.fx__a--b{background:var(--blue)}
.fx__svg{position:absolute;left:0;top:0;width:560px;height:600px;overflow:visible}
.fx__svg path{fill:none;stroke:var(--grey-3);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.fx .w-b{stroke:var(--blue);stroke-width:1.7}
.fx .w-dash{stroke-dasharray:3 4}
.fx .w-bd{stroke:var(--blue);stroke-width:1;stroke-dasharray:4 4}
.fx .w-k{stroke:var(--ink-3);stroke-width:2}
.fx .w-wall{stroke:#9aa0a5;stroke-width:1.6;stroke-linecap:square}
.fx .w-grid{stroke:#e2e4e6;stroke-width:1}
.fx .w-route{stroke:#e3e5e7;stroke-width:12}
.fx .w-bt{stroke:var(--blue);stroke-width:4}
.fx .w-gauge{stroke:#e3e5e7;stroke-width:14;stroke-linecap:butt}
.fx .w-gv{stroke:var(--blue);stroke-width:14;stroke-linecap:butt}
.fx .fx__pl{stroke:var(--blue);stroke-width:2.2;stroke-dasharray:.07 .93;animation:fxRun 3.4s linear infinite;animation-play-state:paused}
.fx .fx__pl--r{animation-direction:reverse;animation-delay:-1.7s}
.fx.is-live .fx__pl{animation-play-state:running}
@keyframes fxRun{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* labels: mono, uppercase, anchored on their point */
.fx__l{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;line-height:1;will-change:transform,opacity;
  font-family:var(--mono);font-size:calc(9.5px * var(--lz,1));letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fx__l.b{color:var(--blue-ink)}
.fx__l.k{color:var(--ink)}
.fx__l.wt{color:#fff}
.fx__l.h{font-family:var(--display);font-size:calc(15px * var(--lz,1));letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.fx__l.big{font-family:var(--display);font-size:64px;font-weight:500;letter-spacing:-.04em;text-transform:none;color:var(--ink)}
.fx__l.tag{font-size:calc(8px * var(--lz,1));letter-spacing:.13em;padding:3px 6px;border-radius:2px;background:var(--blue-tint);color:var(--blue-ink)}
.fx__l.tag--warn{background:var(--ink);color:#fff}
.fx__l.tag--g{background:var(--paper);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--grey-3)}
.fx__l.ic svg{display:block;width:21px;height:21px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fx__l.ic--w svg{stroke:#fff}
.fx__l.ic--b svg{stroke:var(--blue)}
.fx__l.ic--s svg{width:13px;height:13px;stroke-width:2.2}
.fx__l.loupe{width:124px;height:124px;border-radius:50%;background:rgba(14,92,186,.05);
  box-shadow:inset 0 0 0 2px var(--blue),0 0 0 6px rgba(14,92,186,.1),0 22px 40px -22px rgba(14,92,186,.7)}
.fx__l.loupe::after{content:"";position:absolute;left:100%;top:100%;width:40px;height:9px;margin:-10px 0 0 -14px;border-radius:3px;background:var(--ink);transform:rotate(45deg);transform-origin:0 50%}
.fx__l.caret{width:2px;height:20px;background:var(--blue);animation:fxBlink 1.05s steps(1) infinite}
@keyframes fxBlink{50%{opacity:0}}
.fx__l.ring{width:54px;height:54px;border-radius:6px;box-shadow:0 0 0 2px var(--blue),0 0 0 7px rgba(14,92,186,.14)}
.fx__l.halo{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 2px var(--blue);background:rgba(14,92,186,.12)}
/* the small copies in the service rows carry no words */
.dv__art[data-mini] .fx__l:not(.ic){display:none}

@media(max-width:900px){
  .dv__copy{grid-template-columns:1fr;gap:24px}
  .dv__sfig{max-width:520px;margin-inline:auto}
}
@media(max-width:560px){
  .dv__card{margin:32px var(--isl,12px) 0;padding:0 16px}
  .dv__copy{padding:32px 0 40px}
  .dv__subs li,.dv__hand{grid-template-columns:1fr;gap:4px}
}
@media(prefers-reduced-motion:reduce){
  .fx .fx__pl,.fx__l.caret{animation:none}
}

/* ---------- 9 (css). the other three services: display rows on fine lines ---------- */
.sx{position:relative;background:var(--paper);padding:clamp(88px,13vh,150px) 0 clamp(88px,13vh,150px)}
.sx__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(24px,4vw,72px);align-items:end;padding:0 var(--pad);margin-bottom:clamp(28px,4.4vh,48px)}
.sx__k{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink)}
.sx__note{margin:0;max-width:56ch;font-size:15.5px;line-height:1.65;color:var(--ink-3)}
.sx__rows{position:relative;display:block;box-shadow:inset 0 1px 0 var(--grey-3)}
/* two rails at the page edges run the height of the rows */
.sx__rows::before,.sx__rows::after{content:"";position:absolute;top:-40px;bottom:-40px;width:1px;background:var(--grey-3);pointer-events:none;z-index:2}
.sx__rows::before{left:var(--pad)}
.sx__rows::after{right:var(--pad)}
.sx__row{position:relative;display:grid;grid-template-columns:clamp(40px,5.4vw,88px) minmax(0,1fr) clamp(118px,12vw,176px) clamp(36px,3.4vw,52px);align-items:center;
  gap:clamp(16px,2.6vw,44px);padding:clamp(18px,2.8vh,30px) calc(var(--pad) + clamp(16px,2.2vw,36px));text-decoration:none;color:var(--ink);
  box-shadow:inset 0 -1px 0 var(--grey-3);outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sx__row::before{content:"";position:absolute;top:0;bottom:1px;left:var(--pad);right:var(--pad);background:var(--paper-2);opacity:0;transition:opacity .35s var(--ease)}
.sx__row > *{position:relative}
.sx__n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-3);transition:color .3s var(--ease)}
.sx__name{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;min-width:0}
.sx__name b{font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,4.4vw,4.3rem);line-height:1.02;letter-spacing:-.04em;color:var(--ink-2);
  transition:transform .6s var(--out),color .3s var(--ease)}
.sx__tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 7px;border-radius:2px;background:var(--blue-tint);color:var(--blue-ink)}
.sx__art{display:block;aspect-ratio:560/600;width:100%;transform:scale(.94);transition:transform .6s var(--out),box-shadow .4s var(--ease)}
.sx__ar{width:clamp(28px,2.8vw,40px);height:clamp(28px,2.8vw,40px);fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;justify-self:end;
  transition:transform .5s var(--spring)}
.sx__row:hover::before,.sx__row:focus-visible::before{opacity:1}
.sx__row:hover .sx__name b,.sx__row:focus-visible .sx__name b{transform:translateX(10px);color:var(--ink)}
.sx__row:hover .sx__n,.sx__row:focus-visible .sx__n{color:var(--blue-ink)}
.sx__row:hover .sx__art,.sx__row:focus-visible .sx__art{transform:scale(1);box-shadow:inset 0 0 0 1px var(--rule),0 18px 36px -24px rgba(14,40,80,.5)}
.sx__row:hover .sx__ar,.sx__row:focus-visible .sx__ar{transform:translateX(6px)}
.sx__row:focus-visible::after{content:"";position:absolute;top:0;bottom:1px;left:var(--pad);right:var(--pad);box-shadow:inset 0 0 0 2px var(--blue);pointer-events:none}
.sx__row:active .sx__name b{transform:translateX(5px) scale(.985)}
.sx__row:active .sx__ar{transform:translateX(2px) scale(.94)}
@media(max-width:700px){
  .sx__head{grid-template-columns:1fr}
  .sx__row{grid-template-columns:minmax(0,1fr) 84px;grid-template-areas:"n art" "name art";gap:6px 16px;padding:20px calc(var(--pad) + 14px)}
  .sx__n{grid-area:n}.sx__name{grid-area:name}.sx__art{grid-area:art;transform:none}
  .sx__ar{display:none}
  .sx__name b{font-size:clamp(1.55rem,7vw,2.2rem)}
}
@media(prefers-reduced-motion:reduce){
  .sx__row::before,.sx__name b,.sx__art,.sx__ar,.sx__n{transition:none}
}

/* ---------- 7. round fourteen (Cesar, 2026-09-26) ----------
   The comparison is an inset card at the homepage step card's size, and the
   three reworked column figures (.dg) are built by services-v4.js 1b. */
@media(min-width:901px){
  .cp4:not(.cp4--static) .cp4__side{inset:var(--pad);border-radius:var(--r-panel);overflow:clip;padding:clamp(24px,2.6vw,44px) clamp(24px,2.8vw,48px) clamp(20px,2.4vw,36px)}
  .cp4:not(.cp4--static) .cp4__side--them{box-shadow:inset 0 0 0 1px var(--rule),0 24px 48px -36px rgba(11,13,14,.45)}
  .cp4:not(.cp4--static) .cp4__side--us{box-shadow:0 2px 6px rgba(4,24,52,.12),0 32px 64px -36px rgba(4,24,52,.6)}
  .cp4:not(.cp4--static) .cp4__lines{inset:var(--pad)}
  .cp4:not(.cp4--static) .cp4__t{font-size:clamp(1.8rem,3vw,3rem)}
}
.cp4--static .cp4__side{margin:0 var(--pad) 12px;border-radius:var(--r-panel)}

.dg .ig__base{stroke:rgba(14,92,186,.26)}
.dg__dash{stroke-dasharray:3 4}
.dg__rule{stroke:var(--grey-3) !important;stroke-dasharray:2 5}
.dg__p{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0}
.dg__zone{transform:translateY(-50%)}
/* a tile is anchored on its icon, so a wire meets the icon's centre; label and badge hang below */
.dg .ig__t,.dg .ig__core{gap:0}
.dg .ig__t svg{display:block;width:clamp(28px,2.5vw,36px);height:clamp(28px,2.5vw,36px);padding:clamp(6px,.6vw,8px);transition:transform .35s var(--spring)}
.dg .ig__t > span,.dg .ig__t > em,.dg .ig__core > span{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);white-space:nowrap}
.dg .ig__t > span{font-size:9px;letter-spacing:.08em}
.dg .ig__core > span{top:calc(100% + 6px);font-size:9px}
.dg .ig__glyph,.dg .ig__coreIn img{width:clamp(32px,3vw,44px);height:clamp(32px,3vw,44px)}
.dg .ig__coreIn img{padding:8px}
.dg .ig__coreIn{transition:transform .35s var(--spring)}
.dg__core.is-hot .ig__coreIn{transform:scale(1.08)}
.dg__h{position:absolute;inset:-3px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
  box-shadow:0 0 0 2px var(--blue),0 0 0 7px rgba(14,92,186,.14),0 12px 24px -10px rgba(14,92,186,.55)}
.dg__t.is-hot .dg__h{opacity:1}
.dg__t.is-hot svg{transform:scale(1.06)}
.dg__t.is-hot > span{color:var(--blue-ink)}
.dg .ig__t > em.dg__b{top:calc(100% + 21px);font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;padding:2px 5px;border-radius:2px;
  background:var(--blue);color:#fff;opacity:0;transform:translate(-50%,4px);transition:opacity .3s var(--ease),transform .4s var(--spring)}
.dg .ig__t > em.dg__b.is-on{opacity:1;transform:translate(-50%,0)}
/* brand: the identity system, one strip every sub-brand draws from */
.dg__strip,.dg__log{position:absolute;z-index:3;transform:translate(-50%,-50%);display:flex;border-radius:6px;background:var(--paper);opacity:0;transition:opacity .5s var(--ease) .35s}
.dg__strip{width:58%;box-sizing:border-box;gap:6px;padding:6px;box-shadow:inset 0 0 0 1px var(--rule),0 14px 30px -18px rgba(14,92,186,.5)}
.sv4__col.is-in .dg__strip,.sv4__col.is-in .dg__log{opacity:1}
.dg__cell{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px 6px;border-radius:4px;background:var(--paper-2)}
.dg__cell::after{content:"";position:absolute;inset:0;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 4px rgba(14,92,186,.12);opacity:0;transition:opacity .3s var(--ease)}
.dg__cell.is-hot::after{opacity:1}
.dg__cell b{font-family:var(--mono);font-weight:400;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dg__v{display:flex;align-items:center;justify-content:center;height:20px;font-style:normal}
.dg__v--mark svg{width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linejoin:round}
.dg__v--type{font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}
.dg__v--col{gap:2px}
.dg__v--col u{display:block;width:8px;height:14px;border-radius:2px;background:var(--blue)}
.dg__v--col u:nth-child(2){background:var(--ink)}
.dg__v--col u:nth-child(3){background:var(--grey-3)}
.dg__v--voice{font-family:Georgia,serif;font-size:22px;line-height:1;padding-top:8px;color:var(--ink)}
/* systems: the log every step writes to */
.dg__log{align-items:center;gap:5px;padding:7px 10px;box-shadow:inset 0 0 0 1px var(--rule),0 10px 24px -16px rgba(11,13,14,.35)}
.dg__log b{font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-right:6px}
.dg__log i{display:block;width:clamp(12px,1.4vw,20px);height:8px;border-radius:2px;background:var(--grey-3);opacity:.6;transform:scaleX(.6);transition:opacity .3s var(--ease),transform .4s var(--spring)}
.dg__log i.is-on{background:var(--blue);opacity:1;transform:none}
/* digital: the live caption */
.dg__cap{top:auto;font-size:12px;padding:6px 10px;gap:8px;transform:translate(-50%,-50%)}
/* reduced motion: every part lit, no travelling signal */
.dg.is-static .ig__base{stroke:var(--blue);opacity:.45}
.dg.is-static .dg__cell::after{opacity:1}
.dg.is-static .dg__log i{background:var(--blue);opacity:1;transform:none}
.dg.is-static .dg__cap{display:none}
@media(max-width:560px){
  .dg .ig__t svg{width:24px;height:24px;padding:5px}
  .dg .ig__glyph,.dg .ig__coreIn img{width:28px;height:28px}
  .dg .ig__coreIn img{padding:6px}
  .dg .ig__core > span,.dg__zone,.dg .ig__t > em.dg__b{display:none}
  .dg__cell{padding:5px 2px 4px}
  .dg__cell b{font-size:7px;letter-spacing:.04em}
  .dg__log i{width:9px}
  .dg__cap{font-size:10px;padding:4px 7px}
  .dg__cap .jr__n{display:none}
}
@media(prefers-reduced-motion:reduce){.dg .ig__t svg,.dg__h,.dg__cell::after,.dg__log i,.dg .ig__t > em.dg__b,.dg .ig__coreIn{transition:none}}
/* phones: seven tiles a row fit the journey at 24px; the lit ring shrinks with the tiles */
@media(max-width:560px){
  .jr .jr__t svg{width:24px;height:24px;padding:5px}
  .jr .jr__t.ig__t--end svg{width:30px;height:30px;padding:7px}
  .jr__t.is-hot svg{box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 3px rgba(14,92,186,.14)}
  .dg__h{inset:-2px;box-shadow:0 0 0 1.5px var(--blue),0 0 0 4px rgba(14,92,186,.12)}
}