/* Homepage layer on top of v2.css: the same funky identity with more air, a centred 3D hero, a problem → solution → team
   story told in large lit-up paragraphs, and the motion hooks used by motion.js and home.js. Scoped to body.home.v2.
   Performance rule: anything that moves while scrolling or with the pointer animates transform/opacity only. */
.home.v2{--rise:cubic-bezier(.16,1,.3,1);--section:clamp(120px,12vw,180px);overflow-x:clip}

/* Hero field: warm light from the top left, embers from below and a blueprint floor in perspective. */
.home.v2 .first-screen{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;margin-top:calc(-1 * var(--nav-h));padding-top:var(--nav-h);min-height:100svh;
  background:var(--grain),radial-gradient(120% 70% at 50% 118%,rgba(238,74,43,.5),rgba(238,74,43,0) 62%),radial-gradient(55% 55% at 8% 0%,rgba(255,250,225,.55),rgba(255,250,225,0) 70%),radial-gradient(45% 45% at 96% 18%,rgba(255,154,46,.45),rgba(255,154,46,0) 70%),linear-gradient(180deg,#ffd51f 0%,#ffc400 50%,#ffae1e 100%);background-blend-mode:soft-light,normal,normal,normal,normal}
.home.v2 .first-screen::before{content:'';position:absolute;z-index:-2;left:-30%;right:-30%;bottom:-6%;height:50%;background-image:linear-gradient(rgba(201,48,74,.34) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(201,48,74,.34) 1.5px,transparent 1.5px);background-size:72px 72px;background-position:50% 0;transform:perspective(620px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 45%,transparent 92%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 45%,transparent 92%)}

/* Hero, centred: sun and four large blueprint drawings in the background, the 3D headline with Satoraj sitting on it,
   then the promise and one action. */
.home.v2 .hero-3d{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding-block:clamp(20px,4vh,48px) clamp(48px,8vh,96px);text-align:center}
.home.v2 .mega{position:relative;z-index:1;max-width:none;margin:0;font:800 clamp(64px,min(11vw,16.5vh),206px)/.93 Bricolage,sans-serif;letter-spacing:-.045em;color:var(--white);-webkit-text-stroke:.034em var(--ink);paint-order:stroke fill;
  text-shadow:.0047em .0068em 0 var(--ink),.0094em .0136em 0 var(--ink),.0141em .0204em 0 var(--ink),.0188em .0272em 0 var(--ink),.0235em .034em 0 var(--ink),.0282em .0408em 0 var(--ink),.0329em .0476em 0 var(--ink),.0376em .0544em 0 var(--ink),.0423em .0612em 0 var(--ink),.047em .068em 0 var(--ink),.0517em .0748em 0 var(--ink),.0564em .0816em 0 var(--ink),.17em .26em .28em rgba(22,19,13,.22);
  will-change:transform;transform:perspective(1400px) rotateX(calc(var(--my,0) * -6deg)) rotateY(calc(var(--mx,0) * 8deg)) translateY(calc(var(--p,0) * -60px))}
.home.v2 .mega::before{content:'';position:absolute;z-index:-1;left:50%;top:22%;width:3.1em;aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse 20% 14% at 24% 30%,rgba(255,255,255,.97) 0%,rgba(255,255,255,.8) 40%,rgba(255,255,255,0) 74%),radial-gradient(circle at 34% 20%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 3.2%),radial-gradient(ellipse 50% 40% at 34% 28%,rgba(255,236,214,.38) 0%,rgba(255,236,214,0) 70%),radial-gradient(ellipse 22% 9% at 63% 88%,rgba(255,226,170,.7) 0%,rgba(255,226,170,0) 100%),radial-gradient(circle at 70% 92%,rgba(255,170,90,.55) 0%,rgba(255,170,90,0) 34%),radial-gradient(circle at 40% 34%,#ffb27a 0%,#ff7a45 18%,#ee4a2b 42%,#c92f2a 66%,#8f1a26 88%,#5e0f1d 100%);box-shadow:inset -.07em -.1em .22em rgba(60,0,15,.5),inset .03em .05em .1em rgba(255,255,255,.4),0 .32em .42em -.2em rgba(110,20,10,.5),0 .08em .9em rgba(238,74,43,.28);text-shadow:none;-webkit-text-stroke:0;transform:translate(-50%,-50%) translate3d(calc(var(--mx,0) * -14px),calc(var(--my,0) * -10px),0) scale(calc(1 + var(--p,0) * .3))}
.home.v2 .mega-line{display:block;transform-origin:50% 100%}
.home.v2 .mega .cut-word::after{display:none}
.home.v2 .mega .cut-word{position:relative;display:inline-block}
.cut-half{display:inline-block}
.cut-top{clip-path:polygon(-40% -80%,160% -80%,160% 34%,-40% 68%)}
.cut-bottom{position:absolute;left:0;top:0;clip-path:polygon(-40% 68%,160% 34%,160% 260%,-40% 260%)}
.cut-sliced .cut-top{translate:-.05em -.04em;rotate:-2deg}
.cut-sliced .cut-bottom{translate:.03em .02em;rotate:.8deg}

/* Four Satorajs at work around the headline, each on a big colour disc with a rounded name tag above. */
.hero-svc{position:absolute;inset:0;z-index:-1;list-style:none;margin:0;padding:0;will-change:transform;transform:translate3d(calc(var(--mx,0) * 26px),calc(var(--my,0) * 16px + var(--p,0) * -110px),0)}
.hero-svc li{position:absolute;width:clamp(150px,14.5vw,240px)}
.hero-svc a{position:relative;isolation:isolate;display:block;text-decoration:none;color:var(--ink)}
.hero-svc a::before{content:'';position:absolute;z-index:-1;left:50%;top:54%;width:96%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:var(--grain),var(--disc);background-blend-mode:soft-light,normal;box-shadow:inset 0 -14px 30px rgba(0,0,0,.12);transition:scale .7s var(--rise)}
.svc-l1{--disc:linear-gradient(160deg,#ff8a3c,#e0452a);--tag:#e0452a}
.svc-r1{--disc:linear-gradient(160deg,#2cc098,#0d6c5e);--tag:#0d6c5e}
.svc-l2{--disc:linear-gradient(160deg,#6d88f6,#2a3ea8);--tag:#2a3ea8}
.svc-r2{--disc:linear-gradient(160deg,#4a3a20,#16130d);--tag:#16130d}
.hero-svc img{position:relative;width:100%;height:auto;transition:transform .7s var(--rise)}
.svc-label{position:absolute;z-index:2;top:-2%;display:flex;align-items:baseline;gap:8px;padding:9px 18px 10px;border-radius:999px;background:var(--tag);color:var(--card-ink);white-space:nowrap;box-shadow:0 10px 24px -10px rgba(22,19,13,.55);rotate:-2deg;transition:rotate .5s var(--rise),translate .5s var(--rise)}
.svc-label strong{font:800 clamp(18px,1.4vw,22px)/1 Bricolage,sans-serif;letter-spacing:-.03em}
.svc-label span{font-size:13px;font-weight:600;opacity:.85}
.svc-l1 .svc-label{left:-6%}
.svc-r1 .svc-label{right:-6%;rotate:2deg}
.svc-l2 .svc-label{left:-14%;top:0;rotate:-2deg}
.svc-r2 .svc-label{right:-8%;top:2%;rotate:2deg}
@media(hover:hover){
  .hero-svc a:hover img{transform:translateY(-8px) rotate(-2deg) scale(1.04)}
  .hero-svc a:hover::before{scale:1.06}
  .hero-svc a:hover .svc-label{rotate:0deg;translate:0 -4px}
}
.hero-svc .svc-l1{left:1%;top:10%}
.hero-svc .svc-l2{left:3%;bottom:8%;width:clamp(120px,11.5vw,190px)}
.hero-svc .svc-r1{right:1%;top:10%}
.hero-svc .svc-r2{right:2%;bottom:8%}

/* Promise and action straight on the yellow field, below the sun. */
.home.v2 .hero-copy{position:relative;z-index:2;max-width:640px;margin-top:clamp(34px,5.6vh,58px)}
.home.v2 .hero-copy .hero-promise{margin:0;font-size:clamp(24px,2.2vw,34px)}
.home.v2 .hero-copy .hero-intro{margin:10px auto 0;max-width:52ch;font-size:18px;line-height:1.55;color:var(--ink)}
.home.v2 .hero-copy .hero-intro strong{font-weight:600}
.home.v2 .hero-cta{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(20px,3.4vh,34px)}
.home.v2 .hero-cta .microcopy{margin:0;font-size:13px;color:rgba(22,19,13,.7)}

/* Hero choreography waits for the display font (motion.js adds .hero-go), so every run looks the same. */
@media(prefers-reduced-motion:no-preference){
  .js:not(.hero-go) .mega-line,.js:not(.hero-go) .mega::before,.js:not(.hero-go) .hero-svc li,.js:not(.hero-go)   .hero-go .home.v2 .mega-line{animation:mega-in 1.1s var(--rise) both}
  .hero-go .home.v2 .mega-line+.mega-line{animation-delay:.12s}
  .hero-go   .hero-go   .hero-go .hero-svc li{animation:bp-in 1s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.5s + var(--b,0) * .12s)}
  .hero-svc li:nth-child(2){--b:1}.hero-svc li:nth-child(3){--b:2}.hero-svc li:nth-child(4){--b:3}
  @keyframes mega-in{from{opacity:0;transform:translateY(.45em) rotateX(-80deg)}}
  @keyframes sun-up{from{opacity:0;scale:.6}}
  @keyframes bp-in{from{opacity:0;scale:.6;translate:0 40px}}
}

/* Reference: a section of its own. The client's portrait on a sun, his words large, three big numbers. */
.home.v2 .ref{padding-top:clamp(100px,10vw,160px)}
.ref-grid{display:grid;grid-template-columns:minmax(260px,.75fr) 1.6fr;gap:clamp(40px,6vw,110px);align-items:start}
.ref-person{margin:0}
.ref-photo{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/5;border-radius:36px;background:#fff}
.ref-photo img{width:82%;height:auto}
.ref-person figcaption{display:flex;flex-direction:column;gap:2px;margin-top:22px}
.ref-person figcaption strong{font:800 24px/1.1 Bricolage,sans-serif;letter-spacing:-.03em}
.ref-person figcaption span{font-size:15px;color:var(--muted)}
.ref-logo{display:block;width:170px;margin-top:16px}
.home.v2 .ref .quote-main p{max-width:20ch;font-size:clamp(36px,4vw,66px);line-height:1.06;letter-spacing:-.04em}
.ref-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;margin:clamp(40px,4.5vw,64px) 0 0;padding:0}
.ref-facts li{display:flex;flex-direction:column;gap:10px;padding:24px 26px 26px;border-radius:28px;background:#ebe3d4}
.ref-facts strong{font:800 clamp(44px,4.4vw,72px)/.95 Bricolage,sans-serif;letter-spacing:-.05em}
.ref-facts span{font-size:15px;line-height:1.4;color:var(--muted)}
.home.v2 .ref .testimonial-full{margin-top:28px}
.roots{display:grid;grid-template-columns:.75fr 1.6fr;gap:clamp(40px,6vw,110px);align-items:center;margin-top:clamp(80px,8vw,130px)}
.roots-title{font-size:clamp(32px,3.2vw,50px);line-height:1}
.roots-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;margin:0;padding:0}
.roots-list li{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:170px;padding:28px 26px 24px;border-radius:28px;background:var(--white)}
.roots-list img{width:auto;height:34px;max-width:180px;object-fit:contain;object-position:left center}
.roots-list img[src$="mile.svg"]{height:42px}
.roots-list img[src$="milionova-evolucia.webp"]{height:46px}
.roots-list span{font-size:15px;color:var(--muted)}

/* Offer heading: big two-line title, the second word in the 3D hero type, the promise on the right. */
.home.v2 .offer{padding-block:clamp(110px,11vw,170px) clamp(40px,4vw,64px)}
.home.v2 .offer-heading{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;margin-bottom:clamp(48px,5vw,80px)}
.home.v2 .offer-title{font-size:clamp(58px,7.6vw,128px);line-height:.92;letter-spacing:-.05em}
.home.v2 .offer-heading>p{max-width:24ch;margin:0 0 .6em;font-size:clamp(18px,1.5vw,22px);line-height:1.4;text-align:right;color:var(--muted)}
.home.v2 .offer-grid{gap:clamp(14px,1.5vw,22px)}
.home.v2 .offer-card{min-height:clamp(500px,42vw,630px);padding:34px 30px;border-radius:34px}
.home.v2 .offer-card h3{font-size:clamp(36px,3.4vw,52px)}
.home.v2 .offer-card p{font-size:16px}

/* Rhythm and headings elsewhere. */
.home.v2 .section-heading{margin-bottom:clamp(48px,5.5vw,84px)}
.home.v2 .section-heading h2,.home.v2 .faq-intro h2,.home.v2 .story h2{font-size:clamp(52px,6.6vw,108px);line-height:.96}
.home.v2 .section-heading>p{margin-top:22px;font-size:clamp(18px,1.5vw,22px)}
.home.v2 .steps-section{padding-top:var(--section)}
.home.v2 .strip{margin-top:0;gap:clamp(14px,1.5vw,22px)}
.home.v2 .strip li{padding:0 30px 34px;border-radius:32px}
.home.v2 .strip li:nth-child(even){translate:none}
.home.v2 .strip figure{height:clamp(260px,24vw,340px);margin:0 -30px 28px}
.home.v2 .strip h3{font-size:clamp(30px,2.7vw,42px)}
.home.v2 .faq-layout{padding-block:var(--section)}
.home.v2 .chat{gap:16px}
.home.v2 .chat summary{padding:18px 26px;font-size:18px}
.home.v2 .closing .wrap{min-height:clamp(520px,44vw,640px);grid-template-columns:auto minmax(220px,340px) minmax(300px,1fr)}
.home.v2 .closing h2{font-size:clamp(72px,8.4vw,132px)}
.home.v2 .closing-art img{will-change:transform;transform:translateY(calc((1 - var(--p,1)) * 150px))}
.home.v2 .closing-copy p{font-size:21px}
.home.v2 .closing h2.mega-lite{color:var(--white);-webkit-text-stroke:.034em var(--ink);paint-order:stroke fill;text-shadow:.006em .008em 0 var(--ink),.012em .016em 0 var(--ink),.018em .024em 0 var(--ink),.024em .032em 0 var(--ink),.03em .04em 0 var(--ink),.036em .048em 0 var(--ink),.042em .056em 0 var(--ink),.048em .064em 0 var(--ink),.1em .16em .2em rgba(22,19,13,.2)}
.home.v2 .footer-mark{overflow:hidden}
.home.v2 .footer-mark .footer-wordmark{will-change:transform;transform:translateY(calc((1 - var(--p,1)) * 55%))}

/* Story: the problem, then how we work. One large paragraph each; words light up while reading, highlights draw in. */
.story-problem{padding-block:clamp(100px,10vw,150px) clamp(90px,9vw,140px)}
.story .story-text{max-width:1100px;margin-top:clamp(40px,4.5vw,72px);font:800 clamp(24px,2.5vw,38px)/1.25 Bricolage,sans-serif;letter-spacing:-.025em}
.story .story-text p{max-width:none;text-wrap:pretty}
.story .story-text p+p{margin-top:.85em}
.story mark{color:inherit;padding:0 .08em;margin:0 -.04em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(var(--yellow),var(--yellow)) 0 60%/100% 78% no-repeat;transition:background-size .7s var(--rise)}
.js:not(.still) .story-text .sw{color:rgba(22,19,13,.16);transition:color .35s ease}
.js:not(.still) .story-text .sw.on{color:var(--ink)}
.js:not(.still) .story mark{background-size:0% 78%}
.js:not(.still) .story mark.on{background-size:100% 78%}
.home.v2 .story-solution{margin:0 18px;padding-block:var(--section) clamp(90px,8vw,120px);border-radius:44px;background:var(--grain),var(--ink);background-blend-mode:soft-light,normal}
.story-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.home.v2 .story-solution h2{color:var(--bone)}
.story-squad{width:min(38%,420px);height:auto;margin-bottom:-8px}
.home.v2 .story-solution .story-text{color:var(--bone)}
.home.v2 .story-solution mark,.js:not(.still) .story-solution mark,.js:not(.still) .story-solution mark.on{background:none;padding:0;margin:0;color:var(--yellow)}
.js:not(.still) .story-solution .story-text .sw{color:rgba(245,240,230,.2)}
.js:not(.still) .story-solution .story-text .sw.on{color:var(--bone)}
.js:not(.still) .story-solution .story-text mark .sw.on{color:var(--yellow)}
.home.v2 .story-solution .pains-end{margin-top:clamp(48px,5vw,72px)}

/* Team: three portraits right under the heading, no boxes. Each person has their own Satoraj at the photo corner. */
.home.v2 .super{margin-top:clamp(60px,6vw,96px);padding:0 18px;background:none;overflow:visible;color:var(--ink)}
.home.v2 .super-panel{position:relative;overflow:hidden;border-radius:44px;padding-block:clamp(96px,9vw,140px) clamp(90px,8vw,130px);color:var(--card-ink);background:var(--grain),linear-gradient(168deg,#b02e1b 0%,#c63a22 46%,#de4b29 100%);background-blend-mode:soft-light,normal}
.home.v2 .super-panel :focus-visible{outline-color:var(--card-ink)}
.team-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.home.v2 .super h2{font-size:clamp(56px,7vw,116px);line-height:.94}
.team-lead{margin-top:22px;max-width:44ch;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--card-ink)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,56px);max-width:1120px;margin:clamp(56px,6vw,88px) auto 0}
.member{display:flex;flex-direction:column;color:var(--card-ink)}
.member-photo{position:relative;margin:0}
.member-frame{display:block;overflow:hidden;aspect-ratio:4/5;border-radius:26px;background:#a9341f;box-shadow:0 34px 60px -34px rgba(40,8,0,.6)}
.member-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform 1.2s var(--rise)}
.member-ava{position:absolute;right:-20px;bottom:-26px;width:42%;height:auto;transform-origin:50% 100%;transition:transform .6s var(--rise)}
@media(hover:hover){
  .member:hover .member-frame img{transform:scale(1.05)}
  .member:hover .member-ava{transform:rotate(-6deg) translateY(-8px) scale(1.06)}
}
.member-body{padding:34px 4px 0}
.home.v2 .member .person-head{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px}
.home.v2 .member h3{font-size:clamp(24px,2.1vw,30px);color:var(--card-ink)}
.member-role{margin-top:6px;font-size:14px;font-weight:600;color:var(--yellow)}
.member-bio{margin-top:12px;font-size:15.5px;line-height:1.55;color:rgba(255,248,234,.86)}
.home.v2 .member .person-social a{width:36px;height:36px;border-color:rgba(255,248,234,.5);color:var(--card-ink)}
.home.v2 .member .person-social svg{width:18px;height:18px}
@media(hover:hover){.home.v2 .member .person-social a:hover{background:var(--card-ink);border-color:var(--card-ink);color:var(--ink)}}
.home.v2 .member .person-social :focus-visible{outline-color:var(--card-ink);outline-offset:3px}

/* Tilt: cards lean toward the pointer, a soft glare follows it. */
.home.v2 .offer-card{transition:transform .6s var(--rise)}
.home.v2 .offer-card::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.28),rgba(255,255,255,0) 60%);opacity:0;transition:opacity .5s;pointer-events:none;mix-blend-mode:soft-light}
@media(hover:hover){
  .home.v2 .offer-card:hover{--lift:-10px;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift))}
  .home.v2 .offer-card:hover::after{opacity:1}
  .home.v2 .strip li:hover{--lift:-6px}
}

@media(max-width:1100px){
  .home.v2 .closing .wrap{grid-template-columns:auto 1fr}
  .hero-svc li{width:clamp(150px,17vw,220px)}
  .story-squad{width:34%}
  .ref-grid,.roots{grid-template-columns:1fr}
  .ref-person{max-width:360px}
  .home.v2 .offer-heading{grid-template-columns:1fr}
  .home.v2 .offer-heading>p{text-align:left;margin:0}
}
@media(max-width:760px){
  .home.v2{--section:88px}
  .home.v2 .first-screen::before{height:40%}
  .home.v2 .hero-3d{padding-block:28px 64px}
  .home.v2 .mega{font-size:clamp(50px,15.4vw,92px)}
      .home.v2 .section-heading h2,.home.v2 .faq-intro h2,.home.v2 .story h2{font-size:clamp(40px,11.5vw,58px)}
  .home.v2 .offer-title{font-size:clamp(46px,13vw,64px)}
  .home.v2 .section-heading>p{font-size:17px}
  .home.v2 .offer{padding-bottom:40px}
  .home.v2 .offer-card{min-height:230px;padding:24px 22px;border-radius:24px}
  .home.v2 .offer-card h3{font-size:36px}
  .home.v2 .offer-card p{font-size:14px}
  .home.v2 .ref .quote-main p{font-size:clamp(28px,8vw,36px)}
  .ref-facts,.roots-list{grid-template-columns:1fr}
  .ref-facts li{flex-direction:row;align-items:baseline;gap:18px;padding:18px 20px}
  .ref-facts strong{min-width:3.2em;font-size:42px}
  .roots-list li{min-height:0}
  .story .story-text{font-size:clamp(25px,7vw,32px)}
  .home.v2 .story-solution{margin:0 10px;padding-block:64px;border-radius:28px}
  .story-head{flex-direction:column;align-items:flex-start;gap:24px}
  .story-squad{width:100%;max-width:340px}
  .home.v2 .strip li{padding:0 22px 26px;border-radius:24px}
  .home.v2 .strip figure{height:230px;margin:0 -22px 22px}
  .home.v2 .super{margin-top:16px;padding:0 10px}
  .home.v2 .super-panel{border-radius:28px;padding-block:64px 56px}
  .home.v2 .super h2{font-size:clamp(46px,13vw,64px)}
  .team-grid{grid-template-columns:1fr;gap:64px;max-width:420px}
  .member-ava{right:-6px}
  .home.v2 .chat summary{font-size:15px;padding:14px 18px}
  .home.v2 .closing .wrap{min-height:0}
  .home.v2 .closing h2{font-size:clamp(60px,19vw,88px)}
  .home.v2 .closing-copy p{font-size:17px}
}

/* Who is behind it: a sticker above the headline with Jaro's face. */
.hero-by{position:relative;z-index:2;display:inline-flex;align-items:center;gap:12px;margin-bottom:clamp(16px,3.2vh,34px);padding:7px 20px 7px 7px;border:1.5px solid var(--ink);border-radius:999px;background:var(--white);box-shadow:4px 4px 0 var(--ink);text-decoration:none;color:var(--ink);text-align:left;transition:rotate .5s var(--rise),translate .5s var(--rise),box-shadow .5s var(--rise)}
.hero-by img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:1.5px solid var(--ink)}
.hero-by>span{display:flex;flex-direction:column;line-height:1.2}
.hero-by strong{font:800 18px/1.15 Bricolage,sans-serif;letter-spacing:-.025em}
.hero-by>span>span{font-size:13px;color:var(--muted)}
@media(hover:hover){.hero-by:hover{rotate:0deg;translate:-2px -2px;box-shadow:6px 6px 0 var(--ink)}}
@media(max-width:760px){.hero-by{margin-bottom:22px}.hero-by strong{font-size:16px}.hero-by img{width:40px;height:40px}}
@media(max-width:760px){
  .home.v2 .hero-copy .hero-intro{font-size:16px}
}
@media(max-width:760px){
  .hero-svc{position:static;order:9;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin-top:40px;transform:none;z-index:auto}
  .hero-svc li,.hero-svc .svc-l2{position:static;width:auto}
  .hero-svc a::before{display:none}
  .hero-svc img,.hero-svc .svc-l2 img{width:100%;height:72px;object-fit:contain}
  .hero-svc .svc-label,.svc-l1 .svc-label,.svc-r1 .svc-label,.svc-l2 .svc-label,.svc-r2 .svc-label{position:static;display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:8px;padding:0;background:none;box-shadow:none;rotate:0deg;translate:none;color:var(--ink);white-space:normal;text-align:center}
  .svc-label strong{font-size:14px}
  .svc-label span{font-size:11px;font-weight:400;opacity:.75}
  .ref-person{order:2}
}

/* Desktop: navigation and hero fit one screen at full size. */
@media(min-width:761px){
  .home.v2 .first-screen{height:100svh;min-height:640px}
  .home.v2 .hero-3d{padding-block:clamp(8px,2vh,36px) clamp(20px,4vh,64px)}
}
@media(max-width:760px){.home.v2 .mega::before{width:4.4em;top:30%}}
@media(max-width:760px){.ref-person{max-width:260px}}

/* Jaro leads the team: centre column, a bit larger. */
@media(min-width:761px){
  .team-grid{grid-template-columns:1fr 1.22fr 1fr;align-items:end;max-width:1180px}
  .member-lead .member-ava{width:40%}
  .home.v2 .member-lead h3{font-size:clamp(28px,2.5vw,36px)}
  .member-lead .member-bio{font-size:16.5px}
}
@media(max-width:760px){.member-lead{order:-1}}

/* The sliced halves carry only the hard extrusion, so no clipped soft shadow peeks out as a streak. */
.home.v2 .mega .cut-half{text-shadow:0.0047em 0.0068em 0 var(--ink),0.0094em 0.0136em 0 var(--ink),0.0141em 0.0204em 0 var(--ink),0.0188em 0.0272em 0 var(--ink),0.0235em 0.0340em 0 var(--ink),0.0282em 0.0408em 0 var(--ink),0.0329em 0.0476em 0 var(--ink),0.0376em 0.0544em 0 var(--ink),0.0423em 0.0612em 0 var(--ink),0.0470em 0.0680em 0 var(--ink),0.0517em 0.0748em 0 var(--ink),0.0564em 0.0816em 0 var(--ink)}

/* Variant /?hero=soft: a quieter sphere and Satorajs without discs, only a soft shadow on the ground. */
.hero-soft .home.v2 .mega::before{width:2.7em;top:26%;opacity:.9}
.hero-soft .hero-svc a::before{display:none}
.hero-soft .hero-svc a::after{content:'';position:absolute;z-index:-1;left:14%;right:14%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(120,50,0,.28),rgba(120,50,0,0))}
.hero-soft .hero-svc img{filter:none}
.hero-soft .svc-label{box-shadow:0 8px 18px -10px rgba(22,19,13,.45)}
@media(max-width:760px){.hero-soft .hero-svc a::after{display:none}.hero-soft .home.v2 .mega::before{width:3.8em}}

/* Variant /?hero=dark (also used by cut-dark): the same hero on a warm ink field. */
.hero-dark .home.v2 .first-screen{background:var(--grain),radial-gradient(110% 70% at 50% 120%,rgba(238,74,43,.42),rgba(238,74,43,0) 62%),radial-gradient(55% 50% at 6% 0%,rgba(255,200,0,.16),rgba(255,200,0,0) 70%),radial-gradient(45% 45% at 96% 16%,rgba(201,48,74,.22),rgba(201,48,74,0) 70%),linear-gradient(180deg,#1d1810 0%,#16130d 60%,#120f0a 100%);background-blend-mode:soft-light,normal,normal,normal,normal;color:var(--bone)}
.hero-dark .home.v2 .first-screen::before{background-image:linear-gradient(rgba(255,200,0,.14) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,200,0,.14) 1.5px,transparent 1.5px)}
.hero-dark .home.v2 .site-header:not(.is-stuck) .nav-links a{color:var(--bone)}
.hero-dark .home.v2 .site-header:not(.is-stuck) .brand img{content:url(/assets/brand-v2/horizontal-light.svg)}
.hero-dark .home.v2 .site-header:not(.is-stuck) .cta-pop-sm{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.hero-dark .home.v2 .site-header:not(.is-stuck) .cta-pop-sm i{background:var(--ink);color:var(--yellow)}
.hero-dark .home.v2 .site-header:not(.is-stuck) :focus-visible{outline-color:var(--yellow)}
.hero-dark .home.v2 .mega{--ink:#a82a22;color:#fff8ea}
.hero-dark .hero-by{border-color:var(--bone);box-shadow:4px 4px 0 var(--yellow)}
.hero-dark .home.v2 .hero-copy .hero-promise{color:var(--bone)}
.hero-dark .home.v2 .hero-copy .hero-intro{color:#ddd5c6}
.hero-dark .home.v2 .hero-cta .microcopy{color:var(--dim)}
.hero-dark .home.v2 .hero-cta .cta-pop{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.hero-dark .home.v2 .hero-cta .cta-pop i{background:var(--ink);color:var(--yellow)}
.hero-dark .home.v2 .first-screen :focus-visible{outline-color:var(--yellow)}
.hero-dark .svc-label{box-shadow:0 10px 24px -10px rgba(0,0,0,.8)}
.hero-dark .svc-r2 .svc-label{background:#2f2a20;box-shadow:0 0 0 1.5px rgba(245,240,230,.35),0 10px 24px -10px rgba(0,0,0,.8)}
.hero-dark .hero-svc a::before{display:none}
.hero-dark .hero-svc a::after{content:'';position:absolute;z-index:-1;left:14%;right:14%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0))}

/* Variant /?hero=cut (and cut-dark): copy on the left, Satoraj slicing the business brakes on the right.
   No sphere and no service Satorajs here. */
.hero-cut-art{display:none}
.hero-cut .home.v2 .hero-3d{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto auto auto auto;column-gap:clamp(16px,2vw,40px);align-content:center;justify-items:start;text-align:left}
.hero-cut .hero-svc,.hero-cut .home.v2 .mega::before{display:none}
.hero-cut .hero-by{grid-column:1;grid-row:1;margin-bottom:28px}
.hero-cut .home.v2 .mega{grid-column:1;grid-row:2;margin:0;text-align:left;font-size:clamp(56px,min(7.4vw,13.5vh),126px);line-height:.95;transform:perspective(1400px) rotateX(calc(var(--my,0) * -4deg)) rotateY(calc(var(--mx,0) * 5deg)) translateY(calc(var(--p,0) * -40px))}
.hero-cut .home.v2 .mega-line{transform-origin:0 100%}
.hero-cut .home.v2 .hero-copy{grid-column:1;grid-row:3;margin-top:clamp(26px,4vh,44px);max-width:540px}
.hero-cut .home.v2 .hero-copy .hero-intro{margin:12px 0 0}
.hero-cut .home.v2 .hero-cta{grid-column:1;grid-row:4;flex-direction:row;align-items:center;gap:22px;margin-top:clamp(22px,3.6vh,36px)}
.hero-cut .home.v2 .hero-cta .microcopy{max-width:17ch;font-size:14px;line-height:1.35;text-align:left}
.hero-cut .hero-cut-art{display:block;grid-column:2;grid-row:1/5;align-self:center;justify-self:end;width:min(112%,60vw,calc(78vh * 1.82));margin:0 -6% 0 0;will-change:transform;transform:translate3d(calc(var(--mx,0) * 22px),calc(var(--my,0) * 14px + var(--p,0) * -90px),0)}
.hero-cut .hero-cut-art img{width:100%;height:auto}
@media(prefers-reduced-motion:no-preference){
  .js:not(.hero-go) .hero-cut .hero-cut-art{opacity:0}
  .hero-go .hero-cut .hero-cut-art img{animation:cut-in 1.1s cubic-bezier(.2,1.2,.4,1) .35s both}
  @keyframes cut-in{from{opacity:0;transform:translate(-60px,30px) scale(.92) rotate(-3deg)}}
}
.hero-cut.hero-dark .hero-cut-art img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
@media(max-width:760px){
  .hero-cut .home.v2 .hero-3d{display:flex;flex-direction:column;align-items:flex-start}
  .hero-cut .home.v2 .mega{font-size:clamp(46px,13vw,68px)}
  .hero-cut .home.v2 .hero-cta{flex-direction:column;align-items:flex-start;gap:12px}
  .hero-cut .hero-cut-art{order:-1;width:112%;margin:-10px -6% 6px}
}