/* V8: one shared background space, content sheets above it, explained offers,
   and the transformation rail for the five-step engine. Loaded after design.css.
   Wording lives in index.html and is never generated here. */

:root{
  --space:#F2F1EA;--sheet:#FFFEFA;
  --rim:clamp(10px,2.6vw,48px);--gap:clamp(80px,11vw,190px);--r-sheet:clamp(28px,3.2vw,52px);
  --sheet-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px -2px rgba(14,17,22,.10),0 26px 64px -34px rgba(14,17,22,.30);
  --nav-h:94px;--art-h:clamp(190px,17vw,270px);
  /* scrollcraft tokens themed to the existing light identity */
  --sc-canvas:var(--space);--sc-surface:var(--sheet);--sc-ink:#0E1116;--sc-ink-soft:#5A5A66;
  --sc-accent:#C98A00;--sc-accent-ink:#FFFEFA;
  --sc-font-display:Archivo,Arial,sans-serif;--sc-font-text:Archivo,Arial,sans-serif;--sc-font-mono:IBM,monospace;
}
html{background:var(--space)}
body.v8{background:transparent;font-size:17px;letter-spacing:normal}
html:not(.sc-ready) [data-sc-in]{opacity:1;transform:none}

/* ---------------------------------------------------------- the space -- */
.space{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.space__far{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:.9}
.space__3d{position:absolute;inset:0}
.space__3d canvas{position:absolute;left:0;top:0;width:100%;height:100vh;height:100lvh;max-width:none;opacity:0;transition:opacity .9s var(--ease)}
.space__3d[data-render=ready] canvas{opacity:1}
.v8 main,.v8 .footer{position:relative;z-index:1}
.v8 .nav{background:rgba(244,242,235,.82);-webkit-backdrop-filter:blur(14px) saturate(1.04);backdrop-filter:blur(14px) saturate(1.04)}

/* ---------------------------------------------------------- the sheets -- */
.v8 .sheet{margin-inline:var(--rim);border-radius:var(--r-sheet);box-shadow:var(--sheet-shadow);position:relative;z-index:1}
.v8 .sheet+.sheet{margin-top:var(--gap)}
.v8 .services{margin-top:calc(var(--gap) * .5);background:var(--sheet)}
.v8 .system{background:var(--wash)}
.v8 .about{background:var(--sheet);border-radius:var(--r-sheet) var(--r-sheet) 0 0}
.v8 .collab.sheet--bottom{margin-top:0;border-radius:0 0 var(--r-sheet) var(--r-sheet);background:var(--sheet);padding-bottom:70px}
.v8 .testimonials{background:var(--sheet)}
.v8 .contact{background:#FCE001}
.v8 .footer{padding-top:calc(var(--gap) * .55)}

/* ---------------------------------------------------------- offers -- */
.v8 .services>.container{display:block}
.services__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:48px;align-items:end;margin-bottom:58px}
.services__head .section__eyebrow{grid-column:1;grid-row:1}
.v8 .services .section__heading{position:static;grid-column:1;grid-row:2;margin-top:20px;max-width:640px}
.offer-map{grid-column:2;grid-row:1/span 2;margin:0;width:100%;justify-self:end}
.offer-map svg{width:100%;height:auto}
.v8 .services__grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);grid-template-areas:"o1 o2" "o3 o3";gap:44px 56px;padding-top:0;align-items:start}
/* The third offer spans the full sheet in two parts: words left, its working diagram right. */
@media(min-width:1100px){
  .v8 .services__grid>.offer--outbound{align-self:stretch;display:flex;flex-direction:column}
  .v8 .services__grid>.offer--outbound>.card__number{align-self:flex-start}
  .v8 .services__grid>.offer--outbound>.offer__fig{flex:1;display:flex;align-items:center}
  .v8 .services__grid>.offer--ops{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"num fig" "head fig" "text fig" "list fig";column-gap:56px;align-content:start;align-items:start}
  .v8 .services__grid>.offer--ops>.card__number{grid-area:num;justify-self:start}
  .v8 .services__grid>.offer--ops>h3{grid-area:head}
  .v8 .services__grid>.offer--ops>p{grid-area:text}
  .v8 .services__grid>.offer--ops>.offer__fig{grid-area:fig;margin-top:6px;align-self:center}
  .v8 .services__grid>.offer--ops>.card__list{grid-area:list}
}
.v8 .services__grid>.card{padding:34px 0 0;border-top:1px solid #E8E3D7}
.v8 .services__grid>.offer--outbound{grid-area:o1}
.v8 .services__grid>.offer--ops{grid-area:o3}
.v8 .services__grid>.offer--hubspot{grid-area:o2;border-top:0;background:#FBF5E6;border-radius:34px;padding:34px 36px 36px!important;box-shadow:inset 0 0 0 1px #F1E4C2}
.v8 .services__grid>.card>.card__number{position:static;display:inline-grid;place-items:center;width:39px;height:39px;margin:0 12px 14px 0;vertical-align:middle;border-radius:50%;background:#F3F0E8;color:var(--ink);box-shadow:inset 0 0 0 2px #C98A00}
.v8 .services__grid>.offer--hubspot>.card__number{box-shadow:inset 0 0 0 2px #C98A00}
.v8 .services__grid>.offer--ops>.card__number{box-shadow:inset 0 0 0 2px #0E1116}
.v8 .card__badge{vertical-align:middle;margin:0 0 14px}
.v8 .services__grid>.card>h3{margin-top:2px}
.v8 .services__grid>.card>p{max-width:600px;margin-top:14px}
.offer__fig{margin:26px 0 0;position:relative}
.offer__fig svg{width:100%;height:auto;overflow:visible}
.offer--hubspot .offer__fig{margin-top:30px}
.v8 .offer .card__list{margin-top:24px;gap:12px 26px}
.v8 .offer .card__list li{padding-left:22px;font-size:12.5px;cursor:default;transition:color .18s}
.v8 .offer .card__list li:before{width:11px;height:11px;top:3px;background:#EBA800;border-radius:50%}
.v8 .offer .card__list li[data-key=b]:before{background:#C98A00}
.v8 .offer .card__list li[data-key=c]:before{background:#FFFEFA;box-shadow:inset 0 0 0 2.4px #0E1116}
.v8 .offer .card__list li[data-key=d]:before{background:#8A8A98;border-radius:3px}
.pin-a{fill:#EBA800}.pin-b{fill:#C98A00}.pin-c{fill:#FFFEFA;stroke:#0E1116;stroke-width:2.4}.pin-d{fill:#8A8A98}
.offer__fig .k,.offer__fig .base{transition:opacity .22s}
.offer__fig[data-hl] .k{opacity:.16}
.offer__fig[data-hl] .base{opacity:.45}
.offer__fig[data-hl=a] .k-a,.offer__fig[data-hl=b] .k-b,.offer__fig[data-hl=c] .k-c,.offer__fig[data-hl=d] .k-d{opacity:1}
.offer .card__list li[data-on]{color:#212127}
.deal-run{transform:translateX(210px)}
.pop,.grow{transform-box:fill-box;transform-origin:center}
.grow{transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .offer .draw,.offer-map .draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease) .25s}
  .offer .draw--late,.offer-map .draw--late{transition-delay:.75s}
  .sc-ready .offer:not(.sc-in) .draw,.sc-ready .offer-map:not(.sc-in) .draw{stroke-dashoffset:1}
  .offer .pop{transition:transform .55s var(--ease) .5s,opacity .45s var(--ease) .5s}
  .offer .pop-set .pop:nth-child(2n){transition-delay:.62s}
  .offer .pop-set .pop:nth-child(3n){transition-delay:.74s}
  .offer .pop--last{transition-delay:1.35s}
  .sc-ready .offer:not(.sc-in) .pop{opacity:0;transform:scale(.4)}
  .offer .grow{transition:transform .9s var(--ease) .55s}
  .offer .grow:nth-of-type(2n){transition-delay:.7s}
  .sc-ready .offer:not(.sc-in) .grow{transform:scaleY(0)}
  .offer .deal-run{transition:transform 1.7s var(--ease) 1s}
  .sc-ready .offer:not(.sc-in) .deal-run{transform:none}
}

/* ---------------------------------------------------------- engine -- */
html.js body.v8 .engine-runway{height:auto!important;position:relative}
html.js body.v8 .engine-sticky{position:static!important;top:auto}
.v8 .engine-sticky{padding:6px 0 0}
.v8 .system__stage{display:block;position:relative;padding:18px 0 66px;align-items:initial}
.v8 .track{position:absolute;left:0;right:0;top:36px;height:var(--art-h);z-index:2;pointer-events:none}
.v8 .process-engine{width:100%;height:100%;margin:0}
.v8 .system__panels{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;min-height:0;align-content:start}
.v8 .system__panels:before{content:'';position:absolute;left:10%;right:10%;top:calc(18px + var(--art-h) / 2);height:2px;border-radius:2px;background:#D9D8D0}
@media(min-width:1100px){.engine-runway.is-3d .system__panels:before,.engine-runway.is-3d .syspanel__art{visibility:hidden}}
.v8 .syspanel{position:relative;padding:18px 16px 18px;border-radius:24px;transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.v8 .syspanel[data-active]{background:rgba(255,253,250,.86);box-shadow:inset 0 1px 0 #fff,0 18px 40px -26px rgba(14,17,22,.35)}
.syspanel__art{display:block;width:100%;height:var(--art-h);object-fit:contain;margin:0 0 14px;position:relative}
.v8 .syspanel>.card__number{margin-bottom:10px}
.v8 .syspanel[data-active]>.card__number{color:#7A5C10}
.v8 .syspanel h3{font-size:clamp(20px,1.62vw,25px);line-height:1.12;letter-spacing:-.03em;margin-bottom:14px;max-width:none}
.v8 .syspanel p{font-size:14px;line-height:1.6;margin-top:16px;max-width:none}
.v8 .sys-chips{gap:8px 11px}
.v8 .stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.v8 .stepper__step{justify-self:start;font-size:12px}
.v8 .stage__arrow{top:auto;bottom:6px}
.v8 .system__hint{padding:0 120px 18px 0;margin-top:-50px;position:relative}
.lane{display:none}

/* ---------------------------------------------------------- responsive -- */
@media(min-width:1650px){.v8 .sheet{width:min(1700px,calc(100% - 2 * var(--rim)));margin-inline:auto}}
@media(max-width:1150px){
  .services__head{grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:32px}
  .v8 .services__grid{gap:40px 36px}
}
@media(max-width:1099px){
  .services__head{display:block;margin-bottom:44px}
  .offer-map{max-width:520px;margin-top:30px}
  .v8 .services__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"o1" "o2" "o3";gap:40px}
  .v8 .track,.v8 .system__panels:before{display:none}
  .v8 .stepper{display:flex;position:sticky;top:var(--nav-h);z-index:6;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 calc(-1 * var(--pad));padding:10px var(--pad);background:var(--wash)}
  .v8 .stepper::-webkit-scrollbar{display:none}
  .v8 .stepper__step{flex:none;scroll-snap-align:start;flex-direction:row;align-items:center;min-height:46px;padding:9px 15px 9px 9px;border-radius:99px;font-size:12px;white-space:nowrap;gap:9px}
  .v8 .system__stage{padding:22px 0 70px}
  .v8 .system__panels{display:block;padding-left:40px}
  .lane{display:block;position:absolute;left:13px;top:var(--lane-top,26px);height:var(--lane-h,0px);width:2px;border-radius:2px;background:#D9D8D0}
  .lane__fill{position:absolute;inset:0;border-radius:2px;background:#C98A00;transform-origin:50% 0;transform:scaleY(var(--lane-p,0))}
  .lane__token{position:absolute;left:50%;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#EBA800;box-shadow:0 0 0 5px rgba(235,168,0,.24),0 4px 10px rgba(14,17,22,.25);transform:translate3d(0,var(--lane-y,0px),0)}
  .v8 .syspanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,250px);grid-template-areas:"num art" "head art" "chips art" "text art";column-gap:28px;align-content:start;padding:0 0 44px;border-radius:0;background:none!important;box-shadow:none!important}
  .v8 .syspanel>.card__number{grid-area:num}
  .v8 .syspanel h3{grid-area:head;font-size:31px}
  .v8 .syspanel .sys-chips{grid-area:chips}
  .v8 .syspanel p{grid-area:text}
  .syspanel__art{grid-area:art;height:auto;aspect-ratio:1.2;margin:0}
  .v8 .syspanel:before{content:'';position:absolute;left:-33px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--wash);box-shadow:inset 0 0 0 2px #C98A00;transition:background .3s}
  .v8 .syspanel[data-active]:before{background:#C98A00}
  .v8 .system__hint{margin-top:-46px;padding-right:110px}
}
@media(max-width:760px){
  :root{--rim:8px;--gap:84px;--r-sheet:28px;--nav-h:76px}
  .services__head{margin-bottom:22px}
  .v8 .services .section__heading{font-size:clamp(28px,8.5vw,36px);line-height:1.08;margin-bottom:0}
  .offer-map{max-width:330px;margin-top:14px}
  .v8 .services__grid>.offer--hubspot{padding:26px 20px 26px!important;border-radius:26px;margin-inline:calc(-1 * var(--pad) + 6px)}
  .v8 .services__grid>.card>.card__number{width:34px;height:34px}
  .v8 .card__badge{position:static}
  .v8 .offer .card__list{grid-template-columns:1fr}
  .v8 .system__panels{padding-left:34px}
  .lane{left:10px}
  .v8 .syspanel{grid-template-columns:minmax(0,1fr);grid-template-areas:"num" "head" "art" "chips" "text";padding-bottom:40px}
  .v8 .syspanel:before{left:-30px}
  .syspanel__art{width:min(100%,300px);margin:6px 0 16px}
  .v8 .syspanel h3{font-size:28px}
  .v8 .stage__arrow{bottom:8px;top:auto}
  .v8 .system__hint{margin-top:-44px;padding:0 100px 16px 0}
  .v8 .collab.sheet--bottom{padding-bottom:50px}
}
@media(max-width:359px){.v8 .syspanel h3{font-size:25px}.v8 .stepper__step{font-size:11px}}

/* no JavaScript: the engine reads as a list of five illustrated steps */
html:not(.js) .v8 .stepper{position:static}
html:not(.js) .lane{display:none}

@media(prefers-reduced-motion:reduce){
  .space__3d canvas{transition:none}
  .v8 .syspanel,.lane__token{transition:none}
}

/* Readability on the shared background, checked on captured pixels. */
.v8 .proof-stat span,.v8 .footer__legal,.v8 .footer__right{color:#393944}